Почему свойство "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;
}

что мне нужно для многих других элементов на моем сайте, и это, кажется, отбрасывает то, как появляется моя графика "я" - https://jsfiddle.net/ds9sqr0y/. Похоже, что оно не отображается рядом с именем, но, возможно, это отдельная проблема.

Answer 1

Это потому что box-sizing: border-box включает в себя как border иpadding в расчетах высоты.

Это означает, что если вы создаете элемент с height: 30px а также padding-top: 5px, он будет высотой 35px (высота + отступ), но с настройкой box-sizing: border-box, это будет 30 пикселей в высоту.

В вашем конкретном случае вы можете увеличить высоту и ширину, чтобы они выглядели так, как вы хотите:

width: 57px;
height: 57px;

Answer 2

Согласно ответу Джесси де Брюйне, вы можете установить свойство padding в селекторе #moreInfo на 0. Если вы можете, попробуйте уменьшить размер шрифта i, чтобы лучше позиционировать его (я использую Chrome). Установка 30px, кажется, показывает это лучше.

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