ansaurus

Question

HTML Strict & CSS: How do I close the gap?

Answer 1

+5 A:

Delete the line break between your image tag and the div tag.

Daniel A. White 2009-03-03 21:49:25

That shouldn't be the solution, but, sadly, it is.

sblundy 2009-03-03 21:50:23

This doesn't work in Safari. Guffa's answer, however, does.

Chuck 2009-03-03 21:55:02

Doesn't work in Firefox either.

Patrick McElhaney 2009-03-03 22:15:16

Answer 2

+2 A:

Remove the newline in the HTML between the <img> line and the <div> line.

Why yes, it is annoying that HTML treats newlines as spaces.

Chad Birch 2009-03-03 21:49:47

Answer 3

+1 A:

Change:

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"&gt;
<div>text</div>

To:

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"&gt;&lt;div&gt;text&lt;/div&gt;

Andrew 2009-03-03 21:50:37

Answer 4

+14 A:

The image is an inline element, so it's placed on the base line of a text line. The gap is the distance between the base line and the bottom of the text line (I.e. the space needed below the base line for hanging characters like "g" and "j").

Make the image a block element, and the gap goes away:

 display: block;

Guffa 2009-03-03 21:50:52

This seems like the best solution to me. Granted, now you have to worry about floating and other annoying shit when you want to put something to the right of that logo.

Stuart Branham 2009-03-03 21:52:31

+1 for a good solution and a good description of why it works the way it does.

Chuck 2009-03-03 21:59:32

There are of course other ways of keeping the image from being treated as a text element, like putting it in another div. Making it float will also turn it into a block element. Using position:relative; to turn it into a layer may also work.

Guffa 2009-03-03 22:04:51

Answer 5

+3 A:

Add display: block to your <img> either in css or on the style attribute.

Edit Guffa beat me to the above.

You can also wrap the <img> with a <div> which technically speaking in this case you should do anyways. Only block level elements can be descendants of <body> if I remember the HTML specs right. You then have the flexibility of adding more images inside that div (as long as there is no white-space between the close of the <img> and the </div> you should be good to go.

Josh 2009-03-03 21:51:42

I think that it's valid to have inline elements in body in HTML, but not in XHTML. Anyhow it's generally problematic to mix inline elements and block elements inside any block element.

Guffa 2009-03-03 22:41:00

Answer 6

A:

display block didn't work for me but this does.
Give it a negative margin value - Valid CSS
..................................

img {
width : 250px;
height : 70px;
border : 0;
margin-top : -11px;
margin-left : -22px;
padding : 0;
}

....................................
adjust as necessary. ...

2009-06-03 13:35:20

ansaurus

tags:

views:

answers:

HTML Strict & CSS: How do I close the gap?

related questions