Html 为什么'；内联块元素上的t边框工作？

演示：

我遇到了这个问题，我的印象是，

display:inline block

使元素表现为inline和block元素

而

框大小：边框框

，使块元素的宽度补偿边框的宽度，但是

内联块

似乎不是这样

边框宽度不包括在内

解决方法是什么？为什么会这样

代码

---

解决方法：使用outline而不是border，将

margin

值设置为

li

CSS，这样当您将鼠标悬停在它们上方时，它们不会做出奇怪的反应，类似这样：

---

因为你说的是内联块，最可能的原因是内联块实际上没有一个设定的宽度-它只是缩小以适应它的内容。框大小不会影响它如何计算其内容框-它仍然需要至少适合其内容-因此在特定情况下没有解决方法是没有意义的。显示代码和/或屏幕截图？请添加代码？

框大小

确定如何处理显式的

高度

或

宽度

。您既没有

高度

也没有

宽度

，因此

框大小

没有区别。

<ul>
    <li>home</li>
    <li>about</li>
    <li>work</li>
    <li>portfolio</li>
    <li>contact</li>
</ul>

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

li{
    outline: 1px solid;
    margin: 5px;
  }
li:hover {
    outline: 5px solid;
}