Using 'Box-Sizing: Border-Box' with 'Inline-Block' Elements

Using `box-sizing: border-box` with `inline-block` elements

That's quite a common problem.

Adding an overflow value on the container, will have the browser to recalculate the container's dimensions despite it have no not-floated elements.

.container { overflow: hidden; }

Before and After

border-box not working on inline-block elements?

I see the problem now. What's happening is that box-sizing: border-box causes the content box of each element to shrink both horizontally and vertically once you add a border. Because your elements are inline-blocks, the vertical shrinking affects the baseline of the element being hovered, and therefore the baseline of the line it's on, resulting in the other elements on the same line being offset. If you look closely, you'll notice that the text actually stays aligned, which is the goal of offsetting the elements.

Changing the border to an outline works because outlines are designed to have no effect on layout (and also because you then take borders completely out of the picture).

However, it is for this reason that using an outline this way produces a significantly different effect from your original effect with a border. Setting an initial transparent border instead of an outline will ensure that your content stays offset the right amount whether the border is visible against the background (this was shown in a previous answer but it was deleted presumably because it was downvoted):

* { box-sizing: border-box }
ul { font-size: 0 }
li {  display: inline-block;  width: 100px; height: 40px; margin: 10px;  font-size: 20px; text-align: center;  background-color: #FFF176;  border: 5px dashed transparent;}
li:hover { border-color: grey }

<ul>  <li>hover</li>  <li>over</li>  <li>me!</li></ul>

seems `border-box` not working with inline-block of `a` tag

There are two main problems in the code: first, as @Daniel pointed out in his answer, the dimensions of the element must be made explicit so as to prevent automatic resizing. Additionally, as noted in this answer, inline-block elements conflict with border-box sizing, but there are several workarounds.

For one, the CSS attribute overflow: hidden can also be added to the element in question. Alternatively, it is possible to use vertical-align: top to ensure all elements have the same baseline. A functional example can be seen below, with a larger border for emphasis:

a{  display:inline-block;  background:#fff;  border:10px solid #ccc;  box-sizing:border-box;  width:5em;  height:5em;  overflow:hidden;  padding:1rem;}
a.active{  border:0;  background:orange;}

<a class="active" href="#">EN</a><a href="#">FR</a>

box-sizing doesn't works on li with inline-block

Add overflow:hidden to the body. It will prevent any vertical scrollbar.

Also, as a side note, IMO making a layout with every element in position:absolute is a terrible idea and you'll quickly get headaches.

* {  box-sizing: border-box}
body {  overflow: hidden;}
#header {  position: absolute;  top: 0;  right: 0;  left: 0;  background-color: #333c45;  height: 60px;  line-height: 60px;}
#corp {  position: absolute;  top: 60px;  bottom: 60px;  right: 0;  left: 0;  background-color: #CDCDCD;}
#footer {  position: absolute;  bottom: 0;  right: 0;  left: 0;  background-color: #333c45;  height: 60px;  line-height: 60px;}
#footer li {  display: inline-block;  width: 45%;}
ul {  margin: 0;  padding: 0;}
.active {  color: #05FF01;  border-top: 2px solid #05FF01;}

<html>
<head></head>
<body>  <div id="header">    test  </div>  <div id="corp">  </div>  <div id="footer">    <ul>      <li class="active">boutton 1</li>      <li>boutton 2</li>    </ul>  </div></body>
</html>

Giving two inline-block elements a 50% width using the box-sizing property

The white space between the elements is your problem.

inline-block elements are laid out pretty much like normal text, and so the white space between one element’s closing and the next element’s opening tag gets condensed to one single space character according to general HTML rules – and that makes 50% + one space character + 50% end up being a little more than 100%, and so the second element breaks into a new “line”

There are several ways to try and fight this – from eliminating the white space between the element’s tags, setting font-size to 0 for everything “outside” those elements … Some of them are discussed in more detail here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

inline-block boxes not fitting in their container

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>

box-sizing: border-box with no declared height/width

TL;DR

An idea is to keep border for both. Instead of none simply make the color transparent so that the size (including border + padding) will always be the same for both.

div.test {  background-color: red;  box-sizing: border-box;  display: inline-block;  border: 5px solid;  text-align: center;  padding: 50px;}
div.test:first-of-type {  border-color: transparent;}

<div class="test">aa</div><div class="test">aa</div>

Is this the expected behaviour of box-sizing: border-box?

See MDN:

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

It doesn't put margins inside the box.

Consider flexbox instead.

div {  display: flex;}
button {  flex: 1 1 auto;  margin: 5px;}

<div>  <button>Cancel</button>  <button>Continue</button></div>

Using 'Box-Sizing: Border-Box' with 'Inline-Block' Elements