{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 姐就是有狂的资本 的问题《Remove “whitespace” between div element》','https://www.manongdao.com/q-66968.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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 ...)
Although probably not the best method you could add:
You may use line-height on div1 as below:
See this: http://jsfiddle.net/wCpU8/
Add
line-height: 0px;to your parent divjsfiddle: http://jsfiddle.net/majZt/
use
line-height: 0px;WORKING DEMO
The CSS Code:
This will affect generically to all your Div's. If you want your existing parent div only to have no spacing, you can apply the same into it.
The cleanest way to fix this is to apply the
vertical-align: topproperty to you CSS rules:If you were to add content to your
div's, then using eitherline-height: 0orfont-size: 0would 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:
to
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
Using a
<br/>for making a new row it's a bad solution from the start. Make your container #div1 to have a width equal to 3 child-divs.<br/>in my opinion should not be used in other places than paragraphs.