Can anyone tell me why the below CSS produces extra margin below the image? It should just add a 5px padding around the whole thing and it works fine with text. Any ideas?
div#somediv {
margin: 0;
padding: 5px;
}
div#somediv img {
margin: 0;
padding: 0;
}
<div id="somediv">
<img src="someimage.jpg" />
</div>
Capture or open an image. Double-click the image (not the shape). In the File Properties dialog, select the Appearance tab. In the Padding section, enter numbers in the Left, Right, Top, and/or Bottom fields to set the width of the padding (in pixels).
Default margins, borders and padding are all 0, so when you wrap a div around some text, there is no space between its edges and the text. div elements obey the box model strictly, while adding padding etc. to table cells can be interpreted a bit more loosely by browsers.
Padding is the space that's inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side (just like a margin).
Try making the image a block-level element:
div#somediv img
{
display: block;
margin: 0;
padding: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With