Margin collapsing parent

by kmouse

HTML

<div class="wrapper">
 <div class="main">
    <div>
      Hello
    </div>
    <div>
      Lorem ipsum
    </div>
    <div>
      Dolor si amet.
    </div>
  </div>

 </div>

CSS

.main > * { margin-bottom: 1em; }

.main { margin: 1em; }


.main {
	background: #33c;
	border: #ca3 solid 0px;
}

.main > div {
	background: #3c3;
	
}

.wrapper { background: #ca3; border: #000 solid 2px; }