Dean Gibson Dean Gibson - 3 months ago 12
CSS Question

Remove default white space around inline-block elemnts

If I have the following code:

<div class="inline"></div>
<div class="inline"></div>

.inline {
display: inline-block;
height: 100px;
width: 100px;
background: red;
}


You'll notice that there seems to be some default white space still around the
divs
. And the only way I can fix this is by doing this:

<div class="inline"></div><div class="inline"></div>


Which makes my markup look untidy. Can I fix this just in CSS?

Answer

You can try adding a 0 font size in the div container. But you'll need to change the other font sizes inside the div individually:

CSS

.container {
    font-size: 0;
}

.inline {
    display: inline-block;
    height: 100px;
    width: 100px;
    font-size: 10px;
    background: red;
}

HTML

<div class="container">
    <div class="inline"></div>
    <div class="inline"></div>
</div>

A working fiddle can be found HERE.

Not a perfect solution. But this worked for me. The other solution is that one you've provided above.