Clever Geek Handbook

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

I have 6 DIV

s display:inline-block

in one line. But they have a strange empty space between them, how can I get rid of this? They should be inserted into the container on 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;
}
+3


source to share


4 answers


Write font-size:0;

. Like this:

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

Check it out http://jsfiddle.net/y7L7q/1/

OR



Write your sign 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 it out http://jsfiddle.net/y7L7q/2/

+8


source


Since they are set to inline-block, this means that the spaces in between are treated as inline spaces and therefore appear as such. You can fix this by putting all divs on one line in the html or by wrapping a space in the comments:



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


source


This is a common problem with display: inline-block

. You have multiple solutions, remove newlines (or comment them out: http://jsfiddle.net/eaqfk/ ), install font-size: 0

, install margin-right: -4px

.

Everything in this question: CSS: the problem with the dropdown

+3


source


Instead of displaying: inline-block, use float: left to remove unwanted space. Check it.

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

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

0


source






More articles:


All Articles