Remove “whitespace” between div element
This is my HTML code
-
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/
Where This Problem Comes From
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
讨论(0)
-
You may use line-height on div1 as below:
<div id="div1" style="line-height:0px;">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
See this: http://jsfiddle.net/wCpU8/
讨论(0)
加载中...
- 热议问题