21

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

4

9 回答 9

37

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

于 2013-08-29T10:39:11.307 回答
16

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

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

于 2013-08-29T10:30:26.690 回答
5

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.

于 2016-03-19T14:52:59.333 回答
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.

于 2013-08-29T10:30:08.473 回答
3

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/

于 2013-08-29T10:29:52.117 回答
2

Although probably not the best method you could add:

#div1 {
    ...
    font-size:0;
}
于 2013-08-29T10:30:20.533 回答
1

You can remove extra space inside DIv by using below property of CSS in a parent (container) div element

display:inline-flex

Before Adding dislay:inline-flex;

After Adding display:inline-flex; in css

于 2021-01-22T12:03:55.593 回答
0

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;
}

DEMO

于 2013-08-29T10:32:55.423 回答
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.

于 2013-08-29T10:36:01.593 回答