CSS 1px space between divs

Question

I have made a pen showing the problem.

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #fffeed;
}
#menu {
  height: 60px;
  border-bottom: 1px solid black;
}
#menu > div {
  border-right: 1px solid black;
  display: inline-block;
  height: 20px;
  width: 90px;
  padding: 20px 0;
  text-decoration: none;
  text-align: center;
  position: relative;
}
#menu > div > a {
  text-decoration: none;
  color: black;
}

<div id="wrapper">
  <header>
    <div id="menu">
      <div><a href="#">bio</a>
      </div>
      <div><a href="#">blog</a>
      </div>
      <div><a href="#">contact</a>
      </div>
    </div>
  </header>
</div>

If you check the menu with chrome developer tools, there is a 1px gap between every div. I disabled the border, set margin and padding to 0 but I just would not go away. Either I am to stupid to fix it or I don't know. I tried out line-height: 0px; and vertical-align: top; but neihter of those worked for me. I would greatly appreciate help,

Joel

Its white-space http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Nenad Vracar, Apr 15 '16 at 14:39

score 0 · Answer 1 · answered Apr 15 '16 at 14:38

0

Try setting the border-width to 0.

* {
  margin: 0px;
  padding: 0px;
  border-width: 0px;
}

answered Apr 15 '16 at 14:38

chriswirz

278
1
9

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Just remove the whitespace you have in your markup and you'll be good

<div id="wrapper">
  <header>
    <div id="menu">
      <div><a href="#">bio</a>
      </div><div><a href="#">blog</a>
      </div><div><a href="#">contact</a>
      </div>
    </div>
  </header>
</div>

Notice that the <div> starts right after the </div>

In the original markup, your line breaks and spaces between the </div> and the <div> causes text nodes at those points - http://software.hixie.ch/utilities/js/live-dom-viewer/ gives you a pretty good idea of what's going on. Here's a snapshot of the section in question

Removing the whitespace gets rid of these text nodes.

These text nodes cause anonymous inline boxes (as per the visual formatting model - see https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#anonymous). These anonymous inline boxes inherit the properties of the containing block (i.e. #menu), which is why setting the font-size on the #menu to 0 (one of the options suggested in the answer to the linked duplicate) would also get theoretically (and practically for most browsers) rid of the gap (with the addition of extra CSS to correct the font-size for the child divs)

edited May 23 '17 at 11:50

Community

1
1

answered Apr 15 '16 at 14:40

potatopeelings

40,709
7
95
119

Why not close this question as a dupe? – Zach Saucier Apr 15 '16 at 14:41
You have enough rep by now to recognize that this sort of question is asked quite often. Make sure you do your due diligence and search to make sure questions are not duplicates before you answer them. – cimmanon Apr 15 '16 at 14:42
Sorry for the duplicate, did not intend to do that. But can you explain to me why the space inbetween counts as whitespace? – huhnmonster Apr 15 '16 at 15:34
@huhnmonster - I've added some more explanation to the answer. Hope that helps. Cheers! – potatopeelings Apr 15 '16 at 17:18
@potatopeelings thank you so much, that makes it a lot better to understand. :) – huhnmonster Apr 16 '16 at 13:20

CSS 1px space between divs

2 Answers2