<div class="cont1"> <div class="cont2">текст</div> </div>

-

 .cont1 { clear: both; height: 180px; border: 0px solid red; } .cont2 { margin-top: 100px; padding: 5px; height: 70px; text-align: center; border-top: 0px solid black; }

It works in IE, the rest does not work margin-top: 100px; у .cont2 margin-top: 100px; у .cont2 , everything is aligned to the upper boundary. If set for .cont1 border: 1px solid red; then everything becomes ok.

Why? How to do?

1 answer 1

In order for the internal block to “repel” from the parent, the latter must have a padding or border of at least 1px. Transfer

 margin-top: 100px; из .cont2

at

 padding-top: 100px; .cont1

It turns out like this:

 .cont1 { clear: both; height: 80px; padding-top: 100px; border: 0px solid red; } .cont2 { padding: 5px; height: 70px; text-align: center; border-top: 0px solid black; }