CSS div with display:table-cell and box-sizing:bor

Question

Using the latest Google Chrome:

On a page with just this inside body:

<div class="personicon"></div>

and the following CSS:

.personicon {
    display:table-cell;
    width:100px;
    height:100px;
    background-color:#ECECEC;
    border:1px solid #BBBBBB;

    box-sizing:border-box;
}

Actual outer dimensions (including the border): 100px by 102px (expected: 100px by 100px)

Without box-sizing:border-box, outer dimensions are 102px by 102px (as expected).

Why is box-sizing:border-box only applying to the width and not the height?

Thanks :-)

Answer 1

The box-sizing declaration can switch box models. When you add border-box, box sizes willapplied the border in it. The outer dimensions will be 102px by 102px (include the border).

When you use display:table-cell;, the height will allow the height and width declaration, it will draw like a box 102px by 102px still.

But in fact, only in IE, the firefox and -webkit will all draw 100px by 102px, that because MS format a table cell as a block level element, but the firefox and -webkit not, the height will allow the row height, if it don't have, it will allowed the height you defined to draw (include the border).

Answer 2

According to the W3C, elements with a display:table-cell get wrapped in an "anonymous" table element, so you probably get the cellspacing of that table as an extra.

Answer 3

The solution I've found to work for most browsers is to avoid adding borders to display:table-cell elements that are in a display:table && table-layout:fixed. If a border is needed, put it on a regular div (display:block) which is inside the table-cell.