Unwanted spaces when using display: inline-block

Question

i created a super simple html and css file to test display: inline-block, but when i test it there is some unwanted spaces between the boxes...
Html:

<!doctype html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Mall.css" rel="stylesheet" />
</head>
<body>
    <div style="background-color:red;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:yellow;"></div>
</body>
</html>

CSS:

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

div {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 50px;
}

I removed all paddings and margins from the div tags and the body tag, however when i run the html in chrome it produces this result: It is 3 pixels between the divs and 5 pixel beneth them so the total height of the body is 55 pixels when it should only be 50.

imgur

I have found a weird way to fix this which makes me think that this is an issue with the webbrowser and not the code, if i change the CSS to display: block it will show my divs as normal in a diagonal line and whitout any weird spaces inbetween them. Now if i open the developer tools in chrome and change the display in the style of one of the divs to inline-block they all line up horizantally and whitout any unwanted spaces.

image-tag

Anyone have any idea why it behaves like this?

http://davidwalsh.name/remove-whitespace-inline-block – Danield Dec 16 '13 at 12:51 — Danield, Dec 16 '13 at 12:51
`font-size:0` to parent div will solve this issue. – Surjith S M Dec 16 '13 at 12:54 — Surjith S M, Dec 16 '13 at 12:54

score 2 · Answer 1 · answered Dec 16 '13 at 12:50

You have to remove white spaces between div closing and opening.

HTML:

 <div style="background-color:red;"></div><div style="background-color:blue;"></div><div style="background-color:green;"></div><div style="background-color:yellow;"></div>

CSS:

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

div {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 50px;
}

fiddle

score 1 · Accepted Answer · answered Dec 16 '13 at 12:47

1

Chris coyier has a number of solutions for dealing with this white space here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

answered Dec 16 '13 at 12:47

jshawl

3,315
2
22
34

2

*"Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline."* - http://stackoverflow.com/help/how-to-answer – Jarno Dec 16 '13 at 13:03

score 0 · Answer 3 · answered Dec 16 '13 at 12:50

short answer :

change your HTML code from

<body>
    <div style="background-color:red;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:yellow;"></div>
</body>

to

<body>
    <div style="background-color:red;"></div><div style="background-color:blue;">
    </div><div style="background-color:green;">
    </div><div style="background-color:yellow;"></div>
</body>

this is how inline elements behave. i.e. you should not have whitespaces between them in the code to prevent them from showing whitespace/margin when rendered.

Unwanted spaces when using display: inline-block

3 Answers3