Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

in chrome or firefox,why has padding-bottom in this code?

Tags:

html

css

i using doctype:

http://www.w3.org/TR/html4/strict.dtd

full code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<BODY>
<div style="border:1px solid red;background-color:blue;"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"></div>
</BODY>
</HTML>

you can check it out here

in chrome or firefox,why has a padding on bottom?

how to fix it?

(if I remove doctype, or in IE ,it's be okey)

alt text

like image 698
Koerr Avatar asked Dec 29 '22 06:12

Koerr


2 Answers

Set the image to display: block (preview), and it will no longer generate a line box. (Also, be aware that jsFiddle is annoying for doctype switching since it wraps your HTML.)

Read about the inline formatting model and almost standards mode.

like image 142
Josh Lee Avatar answered Dec 30 '22 22:12

Josh Lee


EDIT: jleedev has the right answer. not deleting this because it is often the answer to this sort of issue

Different browsers have different "default" styles for elements. One popular technique is to use a "CSS Reset" stylesheet, that sets everything to neutral values for you, so that you can get consistent results across browsers.

like image 36
Matt Briggs Avatar answered Dec 30 '22 20:12

Matt Briggs