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

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

Answer 1

这是因为box-sizing: border-box在高度计算中同时包含border 和padding 。

这意味着如果您使用height: 30px和padding-top: 5px创建一个元素，它将是35px高（高度+填充），但设置为box-sizing: border-box，它将是30px高。< / p>

在您的特定情况下，您可以将高度和宽度增加到以下内容，使其看起来像您想要的那样：

width: 57px;
height: 57px;

Answer 2

根据Jesse de Bruijne的回答，您可以将#moreInfo选择器中的padding属性设置为0.如果可以，请尝试减小i的字体大小，以便更好地定位它（I＆＃39 ; m使用Chrome）。将它设置为30px似乎表明它更好。

#moreInfo {
    ...
    padding: 0;
    font: 30px Arial, sans-serif;
    ...
}

为什么“box-sizing”属性会显示我的“i”图标？

2 个答案: