html - 为什么 "box-sizing"属性不显示我的 "i"图标？

Question

我想让这些“i”图标之一显示在我网站上的名称旁边，以便人们可以单击它并查找更多信息。我有这个 HTML

<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>

和下面的样式

#personName {
        display: block;
}

#moreInfo {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 36px;
    height: 36px;
    padding: 8px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font: 32px Arial, sans-serif;
    font-weight: bold;
    font-style: italic;
    display: inline-block;
}

问题是我也有这种风格

* {
    box-sizing: border-box;
}

我的网站上需要很多其他元素，它似乎与我的“i”图形的显示方式不符 -- https://jsfiddle.net/ds9sqr0y/ .它似乎也没有出现在名称旁边，但也许这是一个单独的问题。

Answer 1

那是因为 box-sizing: border-box 在高度中包含了 border 和 padding计算。

这意味着，如果您创建一个具有 height: 30px 和 padding-top: 5px 的元素，它将是 35px 高(高度 + 内边距)但设置 box-sizing: border-box，它将是 30px 高。

在您的特定情况下，您可以将高度和宽度增加到以下值以使其看起来像您想要的:

width: 57px;
height: 57px;