Menu
This is my HTML code
<div id="div1"> <div></div><div></div><div></div><br/><div></div><div></div><div></div> </div> My CSS:
#div1 { width:150px;height:100px;white-space:nowrap; border:blue 1px solid;padding:5px; } #div1 div { width:30px;height:30px; border:blue 1px solid; display:inline-block; *display:inline;zoom:1; margin:0px;outline:none; } If I insert the <!DOCTYPE html> before the <html> tag, the page will look like this:
But if I remove the <!DOCTYPE html> tag, the 'whitespace' between the two lines will be remove 
But I'd like to use <!DOCTYPE html> tag, it's recommend, but I can't find any CSS rule that can remove that whitespace, I have used margin:0;outline:none; etc... but it not work , anyone help me. Thanks!( I'm not good at English ...)
759
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space. However, this is a bad way to do what you want to do. You should float the elements if thats what you want to do.
HTML. Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.
We can also remove white space by setting parent element font-size to 0 and child elements font-size to 17px .
The cleanest way to fix this is to apply the vertical-align: top property to you CSS rules:
#div1 div { width:30px;height:30px; border:blue 1px solid; display:inline-block; *display:inline;zoom:1; margin:0px;outline:none; vertical-align: top; } If you were to add content to your div's, then using either line-height: 0 or font-size: 0 would cause problems with your text layout.
See fiddle: http://jsfiddle.net/audetwebdesign/eJqaZ/
This problem can arise when a browser is in "quirks" mode. In this example, changing the doctype from:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> to
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> will change how the browser deals with extra whitespace.
In quirks mode, the whitespace is ignored, but preserved in strict mode.
References:
html doctype adds whitespace?
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
98
Add line-height: 0px; to your parent div
jsfiddle: http://jsfiddle.net/majZt/
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
