Hi,
I am sure you all know this, but i will make a short description anyway. It is about the code below:
<div id="container"> <img style="display: block; float: left;" src="http://placehold.it/468x60" alt="" /> <p class="element" style="margin-top: 30px;"> Sed ut perspiciatis unde omnis ... </p> </div>
an element containing a floated element and a block element wrapping around the float, but you want that the block element to be lower than the floated one, so you set a margin on the block element, but the floated one is pushed by the margin… annoying. ( ex. demo 1 ). So the simplest solution is to set a padding of 1px on the same direction as the margin on the container.
<div id="container" style="padding-top: 1px;"> <img style="display: block; float: left;" src="http://placehold.it/468x60" alt="" /> <p class="element" style="margin-top: 30px;"> Sed ut perspiciatis unde omnis ... </p> </div>
see it on demo 2 .
Leave a Reply