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 ...)
This question is related to
css
html
whitespace
margin
The answer is
You need this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<-- I absolutely don't know why, but go ahead, and add this code snippet to your CSS -->
*{
margin:0;
padding:0;
}
That's it, have fun removing all those white-spaces problems.
use line-height: 0px;
The CSS Code:
div{line-height:0;}
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.
HTML
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
CSS
#div1 {
width:150px;height:100px;white-space:nowrap;
line-height: 0px;
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;
}
Although probably not the best method you could add:
#div1 {
...
font-size:0;
}
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.
Add line-height: 0px; to your parent div
jsfiddle: http://jsfiddle.net/majZt/
You can remove extra space inside DIv by using below property of CSS in a parent (container) div element
display:inline-flex
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/
Source: Stackoverflow.com