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>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: