Html5 Vertical Spacing Issue with <Img>

html5 vertical spacing issue with img

Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements, when not specified as display: block?

First of all, browsers do not have a "HTML5 mode". What they have are three modes "Quirks", "Limited Quirks" (aka Almost Standards) and "Standards" mode. There is only one difference between "Limited Quirks" and "Standards" modes and that relates to the way in which a line-height and baseline is established for the line box of which the <img> sits. In "Limited Quirks" mode, if there is no rendered text content on the line, then no baseline is established and the <img> sits on the bottom of the line box.

In "Standards" mode, the line box always contains the space for the descenders of characters like g, p and y below the baseline, even if there are no real characters in that line box.The gap you see is the distance between the baseline and the bottom of the line box which is the space for those descenders. For a thorough description, see http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

The remedy, then, is either to stop <img> being treated as an inline element { display:block; } or to override the vertical alignment of the <img> { vertical-align:bottom; }. Either will work.

Why does XHTML Transitional not need this hack

Using the XHTML Transitional doctype places the browser into "Limited Quirks" mode. Had you used XHTML Strict, or a full HTML4 Strict doctype, you would have seen the same gaps as you see with the HTML5 doctype as each of these places the browser in "Standards" mode.

Why does XHTML Strict produce a vertical gap too

See above.

Is it safe to use img { display: block; } in a reset.css sheet?

Of course, but there will probably be times when you'll want <img> to be treated as an inline element. In those cases, you'll need to add CSS in the appropriate places to achieve that.

vertical spacing between images

try this.
Remove the lines between them.

<img src="images/disclosure2_01.jpg" alt="Disclosure"><img src="images/disclosure2_02.gif" alt="Disclosure2"><img src="images/disclosure2_03.gif" alt="Disclosure3">

or tinker with css.

img { padding: 0; margin: 0; } 

vertical spacing between images

try this.
Remove the lines between them.

<img src="images/disclosure2_01.jpg" alt="Disclosure"><img src="images/disclosure2_02.gif" alt="Disclosure2"><img src="images/disclosure2_03.gif" alt="Disclosure3">

or tinker with css.

img { padding: 0; margin: 0; } 

Spacing issue with image placed in table - HTML and CSS

You only need to specify a width for the table cells. Try adding this to your CSS:

th, td {
    width: 33%;
}

Image inside div has extra space below the image

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

You can:

• adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
• change the display so it isn't inline.

div {

  border: solid black 1px;

  margin-bottom: 10px;

}

#align-middle img {

  vertical-align: middle;

}

#align-base img {

  vertical-align: bottom;

}

#display img {

  display: block;

}

<div id="default">

<h1>Default</h1>

  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image">

</div>

<div id="align-middle">

<h1>vertical-align: middle</h1>

  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>

  

  <div id="align-base">

<h1>vertical-align: bottom</h1>

  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>

<div id="display">

<h1>display: block</h1>

  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image">

</div>

Eliminate vertical whitespace between images

You get whitespace because the images are laid out inline (between two rows of lines there is spacing). You can either lay them out as block elements....

img { display:block; }

.. or you can use the vertical-align property to define a different vertical align which should remove the spacing...

img { vertical-align:top; }

http://vidasp.net/media/CSS-vertical-align.gif

BTW, please stop using deprecated attributes (cellpadding, cellspacing, align, border). For each of those attributes there is a CSS alternative which should be used. Also, use some CSS reset code (like Yahoo CSS Reset)...

How to remove unwanted vertical spacing between divs

To me it's a vertical alignment issue. You can try

.banner {
    display: block;
    width: 100%;
}
div {
    height: 10px;
    vertical-align: top;
}

That way you don't have to use negative margins (which aren't wrong, just controversial practice).

Check it out here

---

Related Topics