border-box not working on inline-block elements?

Question

I have a list of inline-block elements, and I want to add a border to the element you hover over. However, notice how the border offsets the element, even when I use box-sizing: border-box and explicitly define the widths and heights of the elements. I illustrated the behavior below:

* { 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;
}

li:hover { border: 5px dashed grey }

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

The best solution I found is to use outline and outline-offset instead of border, but I'd really like to know why my original method doesn't work :/

UPDATE: While BoltClock gave a really great explanation and suggestion (which was all I was asking for), I just wanted to mention that I totally forgot about flexbox, which solved pretty much all the problems I was having with inline elements. I combined it with BoltClock's transparent border trick for my final JSFiddle solution

You have a typo. Your CSS says `box-sizing: border box` - you have a space rather than a dash in "border box". — BoltClock, Feb 25 '16 at 12:41
alright I fixed the typo, thanks. The problem still persists though :/ — woojoo666, Feb 26 '16 at 02:22

BoltClock · Accepted Answer · 2016-02-26T03:42:23.910

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>

border-box not working on inline-block elements?

1 Answers1

Linked