inline-block boxes not fitting in their container [duplicate]

Question

Not sure what I'm doing wrong, I thought that by adding border-box, it would fit those 4 boxes neatly.

http://jsfiddle.net/jzhang172/x3ftdx6n/

.ok{
width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
}

<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

Bs

Answer 1

The problem is that inline-block elements are, by default, rendered with a bit of extra space.

Why? Because a div set to inline-block has some inline element characteristics.

A space or line break between span elements will result in a space rendered by the browser.

Similarly, if you're writing text in a <p> element, every time you hit the space bar or add a line break a space will be rendered by the browser.

This same rule applies to inline-block divs. A space or line break in the source will result in a space rendered. This creates unexpected width, which can result in an overflow or wrapping.

One solution is to remove all whitespace between elements in the source:

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
}

<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

Another method sets font-size: 0 on the parent and, if necessary, restores the font on the child:

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
  font-size: 0;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
  font-size: 16px;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Other options include negative margins, omitting closing tags, using comment tags, floats and flexbox. See this article for more details:

• Fighting the Space Between Inline Block Elements

Lens

Beautiful explanation and links are super helpful, I love you, marry? – Bs

Answer 2

I would insist you to add just one property. One which removes spaces betweenbox div. Just add float:left; to your .box class/div.

Demo : UPDATED

.ok{
    margin:0px auto; /* ADDED */
    width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
    padding:0px auto;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
    float:left;
}

<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

UPDATE : To center it add just one more property margin:0px auto; to your .ok class/div. CHECK OUT THE UPDATED DEMO AND SNIPPET.

Note : This would make your text in box div left aligned, so if you want it center just add text-align:center; to your .box class in CSS.

Roentgenology

Works awesome, only problem is if I want it to be centered, it doesn't work out. But pointed me in the right direction. – Bs