Why do obviously fitting child inline-blocks overflow?

Question

Why does the last green div overflow if I change the width of the blue div from 212px to 211px? Where do the spaces between the green divs vome from?

The developer tools show me no margin, no padding, no border, nothing at all which could produce these gaps. Where do they come from?

212px width --> no overflow

211px width --> overflow

#test {
  background-color: blue;
  height: 50px;
  width: 211px;
}

#test>div {
  display: inline-block;
  background-color: green;
  height: 50px;
  width: 50px;
}

<div id="test">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

score 2 · Accepted Answer · answered Oct 21 '19 at 17:03

2

You turned your divs into inline elements, and inline elements are sensitive to the whitespace in your code and take up space. Remove the whitespace and the gaps go away:

#test {
  background-color: blue;
  height: 50px;
  width: 211px;
}

#test>div {
  display: inline-block;
  background-color: green;
  height: 50px;
  width: 50px;
}

<div id="test">
  <div></div><div></div><div></div><div></div>
</div>

answered Oct 21 '19 at 17:03

j08691

204,283
31
260
272

an alternative it's to add `` before the opening tag – Juan Oct 21 '19 at 17:04
@JuanCastillo Correct. Another workaround is to set `font-size:0;` on the container – j08691 Oct 21 '19 at 17:06

Why do obviously fitting child inline-blocks overflow?

1 Answers1