Remove "whitespace" between div element

Question

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

If you insert the what before the tag? – Grim... Aug 29 '13 at 10:28 — Grim..., Aug 29 '13 at 10:28
Try setting a `line-height` of 30px on `#div1`. – Grim... Aug 29 '13 at 10:30 — Grim..., Aug 29 '13 at 10:30

score 37 · Accepted Answer · edited May 23 '17 at 12:34

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

edited May 23 '17 at 12:34

Community

1
1

answered Aug 29 '13 at 10:39

Marc Audet

46,011
11
63
83

Do u have any solution if the inside div's are irregular in height? – Dimple Aug 21 '15 at 11:58
1

@Dimple If the div's have different heights, then you are looking at a totally different type of problem. The solution involves using a jQuery plugin known as Masonry: http://masonry.desandro.com/ If you search for "masonry jquery" on StackOverflow, you will see that this is a common problem, which is why someone created the plugin. Hope this helps! – Marc Audet Aug 21 '15 at 12:21
i there any pure css solution? – Dimple Aug 21 '15 at 12:25
This display:inline-block is not helping removing space , instead you can use display:inline-flex – Archana Shah Jan 22 '21 at 12:05

score 17 · Answer 2 · answered Aug 29 '13 at 10:30

17

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

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

answered Aug 29 '13 at 10:30

Simon Staton

4,345
4
27
49

Nitesh · Answer 3 · 2013-08-29T10:36:55.067

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.

edited Aug 29 '13 at 10:36

answered Aug 29 '13 at 10:30

Nitesh

15,425
4
48
60

score 4 · Answer 4 · edited Mar 19 '16 at 15:03

4

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.

edited Mar 19 '16 at 15:03

Tunaki

132,869
46
340
423

answered Mar 19 '16 at 14:52

Tauren Mohammed Uddin

57
1
2

This helped me out with an issue between two divs on the page body, adding that bit of CSS removed the whitespace for me, Thanks – Ricky Sep 10 '16 at 21:20

score 3 · Answer 5 · edited Jun 19 '17 at 19:12

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/

edited Jun 19 '17 at 19:12

answered Aug 29 '13 at 10:29

Ankit Zalani

3,068
5
27
47

score 2 · Answer 6 · answered Aug 29 '13 at 10:30

2

Although probably not the best method you could add:

#div1 {
    ...
    font-size:0;
}

answered Aug 29 '13 at 10:30

Adam Robinson

81
1

What happens if you add text in any of the child elements? – Marc Audet Aug 29 '13 at 10:43
1

Well it wasn't clear what was inside these divs - but you could always reset it back. – Adam Robinson Aug 29 '13 at 12:57

score 2 · Answer 7 · answered Jan 22 '21 at 12:03

2

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

answered Jan 22 '21 at 12:03

Archana Shah

395
2
6

score 0 · Answer 8 · answered Aug 29 '13 at 10:32

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

score 0 · Answer 9 · answered Aug 29 '13 at 10:36

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.

answered Aug 29 '13 at 10:36

Dan Ovidiu Boncut

3,083
4
25
45

It depends what else the OP wants to do with the parent container, maybe a background image will fill in the rest of the space. In this case, I would not fault anyone for hard coding a line break. – Marc Audet Aug 29 '13 at 10:41

Remove "whitespace" between div element

9 Answers9

Where This Problem Comes From

Linked