Question: I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML

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

```

and the below style

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

```

The problem is I also have this style

```
* {
    box-sizing: border-box;
}

```

which I need for a lot of other elements on my site and it seems to be throwing off the way my "i" graphic is appearing -- <https://jsfiddle.net/ds9sqr0y/> . It also doesn't seem to be appearing next to the name, but maybe that's a separate issue.

Answer: 
That's because `box-sizing: border-box` includes both the `border` *and the `padding`* in the height computations.

Which means that if you create an element with `height: 30px` and `padding-top: 5px`, it will be 35px tall (height + padding) but with setting `box-sizing: border-box`, it will be 30px tall.

In your specific case, you can increase the height and width to the following to make it look like you want to:

```
width: 57px;
height: 57px;

```
As per Jesse de Bruijne's answer, you can set the padding property within the #moreInfo selector to 0. If you can, try and reduce the font size of the i, to better position it (I'm using Chrome). Setting it to 30px seems to show it better.

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

```