CSS : space between h2 and ul

[sorrentandrea]

Hello everyone this is my first discussion here, so sorry for the mistakes I’ll do.
Here is the problem: I need to add space between an h2 and a ul element so i tried different things but it only works fine if I add margin-top and margin-bottom to the li elements. The problem is that I can’t use these rules because of some RWD reasons.
I really don’t understand why it doesn’t work if I write margin-top and margin-bottom to the ul and not to the li.
So here is the code, and thanks for helping! :D

TITLE2

.container>h2{
width: 72.916667%;/* 700px/960px */
margin: 0 auto;
text-align: center;
background: url(../img/orizz.png) repeat-x;
background-position: center center;
clear: both;
}

.container>h2>span{
font-size: 1.875em; /* 30px/16px */
padding: 1px 15px;
line-height: 1.3;
}

.img_showcase{
clear: both;
}

.img_showcase li{
float: left;
width: 24.6875%;
margin-bottom: 50px;
margin-top: 50px;
margin-left: 0.155%;
margin-right: 0.155%;
}

[Watson90]

Have you kind of got a picture so we can see what you’re trying to achieve, I am trying to clean up your code a little in a CodePen but it’s proving to be hard…

[sorrentandrea]

Here is the page with the effect achieved thanks to margin-top and margin-bottom on the li elements http://www.andreasorrentino.eu/new/work.html
hope this help… =)
thanks!

[Watson90]

I have cleaned up your code a little and added a little of my own, here take a look;

http://codepen.io/Watson90/full/IwACk

Makes these changes in your CSS;

.img_showcase {
overflow: hidden;
}
Let me know if this is kinda what you’re after?

[Paulie_D]

Because the first ul contains only floated items it is taken out of the flow the margin of the h2 has nothing to push against to force it down.

You could try inline-block instead. http://codepen.io/joe/pen/diLKG

[sorrentandrea]

thanks so much guys! both solution worked really good! I used the overflow: hidden;
thanks again!

[Watson90]

Yep, agreed!

[sorrentandrea]

thanks for the advice andy I’ll keep in mind.. =)

[Author]

Posts