Geek Answers Handbook

HTML Strict & CSS: How can I close a space?

The following webpage has a few pixels space between the image and the div. (I tested in Firefox 3 and Safari 4.)

How can I close the gap?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test Page</title> <style type="text/css" media="screen"> body { background-color: black; } img { width: 250px; height: 70px; border: 0; margin: 0; padding: 0; } div { background-color: white; border: 0; margin: 0; padding: 0; } </style> </head> <body> <img alt="Qaru Logo" src="http://is.gd/lEfE"> <div>text</div> </body> </html>
+4
source share
6 answers

The image is an inline element, so it is placed in the base line of the text string. The gap is the distance between the baseline and the bottom of the text line (Ie The space required below the baseline to suspend characters like "g" and "j").

Make the image a block element and the space will disappear:

  display: block;
+16
source

Remove the line break between the image tag and the div tag.

+5
source

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

Change Guff beat me up.

You can also wrap <img> with <div> , which technically says in this case what you should do anyway. Only block-level elements can be descendants of <body> if I remember the HTML specifications correctly. Then you have the flexibility to add more images inside this div (if there is no free space between closing <img> and </div> ), you should be good to go.

+3
source

Delete the new line in HTML between the <img> line and the <div> .

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

+2
source

Edit:

 <img alt="Qaru Logo" src="http://is.gd/lEfE"> <div>text</div>

To:

 <img alt="Qaru Logo" src="http://is.gd/lEfE"><div>text</div>
+1
source
Display unit

didn't work for me, but it does. Give it a negative field value - Valid CSS

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

set up if necessary.

0
source

More articles:


All Articles