May 29, 2013
Using margin on wrap list won't work. margin: top is always 0
Vibskov’s Question:
Why does the 1st wrap .wp-list margin: 10px and .a .b use margin: 10px not work?
.wp{
background-color: blue;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width: 450px;
}
.wp_list{
background-color: red;
margin: 10px;
height: 130px;
position:relative;
}
.a, .b, .c{
background-color: gray;
}
.a{
width: 220px;
height: 30px;
margin: 10px;
}
.b{
width: 220px;
height: 100px;
margin: 10px;
}
.c{
width: 130px;
height: 130px;
top:0;
right:0;
position:absolute;
}
HTML:
<div class="wp">
<div class="wp_list">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
<div class="wp_list">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
// generate from php
</div>
Margins collapse on block elements, this means that when you have an element with a 10px margin set on the bottom, followed by an element with 5px margin set on the top. The margin between the two will not be 15px, but will collapse down to the largest of the two: 10px, or in this case when they’re both 10px, it will collapse to be 10px.
You should add display: inline-block; to .a, .b, .c, that will fix it:
.a, .b, .c{
background-color: gray;
display: inline-block;
}
This is mainly because because it is behaving as inline element. Add display: inline-block;
.wp_ist{
display: inline-block;
background-color: red;
margin: 10px;
height: 130px;
position:relative;
}
