Remove "whitespace" between div element

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:

enter image description here

But if I remove the <!DOCTYPE html> tag, the 'whitespace' between the two lines will be remove enter image description here

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 ...)

Solution 1:

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">

<!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

Solution 2:

Add line-height: 0px; to your parent div

jsfiddle: http://jsfiddle.net/majZt/

Solution 3:

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.

Solution 4:

use line-height: 0px;

WORKING DEMO

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.