Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div and Image Margin/Padding

Tags:

css

xhtml

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>
like image 970
mike Avatar asked Jan 12 '10 23:01

mike


People also ask

Can we give padding to image?

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).

Does a div have padding?

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.

What is image padding?

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).


1 Answers

Try making the image a block-level element:

div#somediv img
{
    display: block;
    margin: 0;
    padding: 0;
}
like image 113
Will Vousden Avatar answered Oct 13 '22 16:10

Will Vousden