Why do inline-block elements not fit properly within container?

Question

I have a container element which has a width of 560px and a height of 80px. Inside the container, I have 7 inline-block elements which are 80 x 80. (80 width by 80 height) But for some reason, the 7th inline-block element is getting cut off. (80 * 7 = 560)

#playerChoice {
      width: 560px;
      height: 80px;
    }

    #playerChoice > .choice {
      width: 80px;
      height: 80px;
      display: inline-block;
    }

<div id="playerChoice">
      <div class="choice" id="choice1"></div>
      <div class="choice" id="choice2"></div>
      <div class="choice" id="choice3"></div>
      <div class="choice" id="choice4"></div>
      <div class="choice" id="choice5"></div>
      <div class="choice" id="choice6"></div>
      <div class="choice" id="choice7"></div>
    </div>

I usually comment out the extra white space, even though it's ugly, because it doesn't require you changing any of your existing code that you've already written. — Waxi, Apr 11 '17 at 16:45
Inline-block will include the whitespace between your divs. You have two options... remove all of the whitespace from your HTML and have ugly HTML, or you can make the `choice` be display block instead of display inline-block and float them. — jas7457, Apr 11 '17 at 16:50

score 1 · Accepted Answer · edited May 23 '17 at 12:25

Inline elements include the extra whitespace that exists in the markup, as well as descender height for letters like g, j, p, q, y. This extra white space makes the elements larger than you expect them to be.

Though there are workarounds to continue using inline-block I would recommend using flexbox or float them if you cannot use flexbox.

Flexbox Solution

* { 
  box-sizing: border-box;
}
#playerChoice {
  display: flex;
  width: 560px;
  height: 80px;
  border: 1px dashed indianred;
}

.choice {
  flex-grow: 1;
  border: 1px dashed #ccc;
}

<div id="playerChoice">
  <div class="choice" id="choice1">1</div>
  <div class="choice" id="choice2">2</div>
  <div class="choice" id="choice3">3</div>
  <div class="choice" id="choice4">4</div>
  <div class="choice" id="choice5">5</div>
  <div class="choice" id="choice6">6</div>
  <div class="choice" id="choice7">7</div>
</div>

Thanks! I just looked into this a bit. In my case, I don't have any text on my page, so I was able to set the font-size: 0, as a workaround. — Steez, Apr 11 '17 at 16:51

Why do inline-block elements not fit properly within container?

1 Answers1