Strange margin on `display:inline-block`-elements

Question

I have 6 DIVs with display:inline-block in one line. But they have a strange white space between each other, how can I get rid of that? They should fit in the container in one line.

Fiddle: http://jsfiddle.net/y7L7q/

HTML:

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS:

#container{
    width:300px;
    border:1px solid black;
}
.box{
    display:inline-block;
    height:50px;
    width:50px;
    background-color:black;
    margin:0;
    padding:0;
}

score 10 · Accepted Answer · answered Mar 12 '12 at 09:18

10

Write font-size:0;. Like this:

#container{
    width:300px;
    border:1px solid black;
    font-size:0;
}

Check this http://jsfiddle.net/y7L7q/1/

OR

Write your mark like this:

<div id="container">
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>

Check this http://jsfiddle.net/y7L7q/2/

answered Mar 12 '12 at 09:18

sandeep

91,313
23
137
155

8

setting font-size:0 is not the right solution...as any content inside those boxes will have 0 font-size. – Abhidev Mar 12 '12 at 09:41
You can give inside content font-size as per your requirement check this http://jsfiddle.net/y7L7q/10/ – sandeep Mar 12 '12 at 09:47
you can check this http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – sandeep Mar 12 '12 at 10:00
yes you can..but then you have to specify the same property multiple times. – Abhidev Mar 12 '12 at 10:12
First thing i give two solutions not only font-size:0 & second there no need to define multiply times if you define display:inline-block then you have to define font-size:0 hack. – sandeep Mar 12 '12 at 10:16
setting `font-size: 0` also removes the ability to specify the child container's font-size in em or % – wheresrhys Mar 12 '12 at 10:19
Its good that you provided 2 solutions, I am just saying that it can cause more problems if there are multiple elements in those divs, then you'll have to specify the font-size for each of those elements. +1 for @wheresrhys comment. – Abhidev Mar 12 '12 at 10:23
interesting solution. I do like your css only approach - always useful to have something you can do when editing the html isn't an option - and `word-spacing` doesn't feel like a hacky solution (although I still feel `font-size: 0` does) – wheresrhys Mar 12 '12 at 11:01

wheresrhys · Answer 2 · 2014-06-09T12:37:14.557

10

Because they are set to inline block this means the whitespace between them is treated as inline whitespace, and therefore rendered as such. You can fix this by either by putting all the divs on one line in the html or wrapping the white space in comments:

<div class="box"></div><!--
--><div class="box"></div>

edited Jun 09 '14 at 12:37

answered Mar 12 '12 at 09:23

wheresrhys

22,558
19
94
162

1

My preferred solution is comments between blocks. I tend to add `` for the future web developer that'll read my HTML/CSS code – FelipeAls Mar 12 '12 at 09:58

score 3 · Answer 3 · edited May 23 '17 at 10:30

3

It's a common issue with display: inline-block. You have a few solution, delete new lines (or comment them : http://jsfiddle.net/eaqfk/), set font-size: 0, set margin-right: -4px.

Everything is on this question : CSS: Spacing issue with dropdown

edited May 23 '17 at 10:30

Community

1
1

answered Mar 12 '12 at 09:22

TimPetricola

1,491
2
12
24

score 1 · Answer 4 · answered Mar 12 '12 at 09:44

1

Instead of display:inline-block, use float:left to remove the unwanted space. Check this out.

http://jsfiddle.net/y7L7q/9/

Also note that font-size:0 is not the correct approach in my opinion as it will mess up the content inside those divs.

answered Mar 12 '12 at 09:44

Abhidev

7,063
6
21
26

Strange margin on `display:inline-block`-elements

4 Answers4

Linked