Geek Answers Handbook

Mysterious fill / margin around images

See the following jsFiddle: http://jsfiddle.net/Leng/kQvNH/

Can someone explain why a significant number of additions appear on each line of horizontal dots (about 15 pixels above and 4 pixels below)? Images are only 2px tall. Where does the indentation come from?

NOTE:

For me, this mysterious padding around images only happens when I start my documents with an HTML5 header:

<!DOCTYPE html> <html>

Images are usually displayed (without filling) when I use any other header, such as HTML4 or this XHTML header for a web page:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

So it looks like an HTML5 mismatch. I would like to switch to standard HTML5 headers, but this little annoyance is stopping me from doing this.

Thanks for any recommendations.

DECISION:

Here is jsFiddle with the solution: http://jsfiddle.net/Leng/Sn2PC/

 img { display:block; margin:0 auto; }

This is based on Chris's answer below.

Note that setting font-size: 0 or line-height: 0 is not a solution, because it is a mess (obviously) with the font size and line height.

Again, setting the lock screen and creating an automatic field was not necessary to execute normal, centered, non-padded images in HTML4 or XHTML.

HTML5 created this “feature” where images are embedded and will be indented based on line height or font size.

+4
source share
3 answers

I think this is because img elements are inline. Setting font-size or line-height to something small fixes this. Also, set the images to display: block and set the height for them.

+3
source

The <img> displayed as INLINED, so it comes with plain text. Just change the line height of your container to something closer to the image height, and the font size (1px) will fix it.

So, to explain the filling, there are no extras around your images. This is an empty line of text with the height (line height) defined by the user agent.

reproduced here

+1
source

You can add a line-height: 2px; in the style of #theDiv

0
source

More articles:


All Articles