Remove default white space around inline-block elemnts

Question

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?

@TeutaKoraqi float might mess up different things in the style. — twodee, Aug 15 '16 at 07:55

score 1 · Answer 1 · answered Aug 15 '16 at 07:49

1

Look at the very good article which comes with a few different approaches: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ and choose the best fir for you.

answered Aug 15 '16 at 07:49

Anton

2,458
2
18
30

score 1 · Answer 2 · answered Aug 15 '16 at 07:51

You can achieve that by wrapping them inside a flex-box Creating a parent for them and giving display: flex to the parent will work

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

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

score 1 · Accepted Answer · edited Aug 15 '16 at 09:26

1

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.

edited Aug 15 '16 at 09:26

Anton

2,458
2
18
30

answered Aug 15 '16 at 07:53

twodee

606
5
24

It's not working on my **[Fiddle](https://jsfiddle.net/baL1zshb/)** – Syam Pillai Aug 15 '16 at 07:57
@SyamPillai, because your Fiddle is wrong however the answer is correct. – Anton Aug 15 '16 at 08:16
@Anton, Yeah answer will be correct. But can you please check what's error in my fiddle – Syam Pillai Aug 15 '16 at 08:19
1

@SyamPillai, sorry, sometimes I write faster than I think. The answer is correct only partially. The idea presented in the answer is correct, the code is not (I will suggest an edit). Here is an updated [fiddle](https://jsfiddle.net/baL1zshb/1/) which works - container has to have `font-size: 0`, not the inline items. – Anton Aug 15 '16 at 09:20
@Anton thanks for the edit. I just noticed the bug. I am on the mobile site of SO, therefore I couldn't test it before. Thanks again! – twodee Aug 15 '16 at 09:28

Remove default white space around inline-block elemnts

3 Answers3