Demo: http://jsfiddle.net/L5jchnpm/
I've encountered an issue where I believed that using display: inline-block would make elements act as both inline and block elements.
Additionally, I thought that setting box-sizing: border-box would adjust the width of block elements to account for the border's width, but it doesn't seem to work as expected with inline-block.
The border width is simply not being included in the dimensions.
Is there a workaround for this behavior, and can someone explain why it functions this way?
Code
<ul>
<li>home</li>
<li>about</li>
<li>work</li>
<li>portfolio</li>
<li>contact</li>
</ul>
CSS
ul {
overflow: auto;
}
li {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: 1px solid;
}
li:hover {
border: 5px solid;
}