CSS div with display: cell table and window size: mismatch between the width and width of the border

Question

Using the latest Google Chrome:

On the page with this inner 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 external dimensions (including border): 100px by 102px (expected: 100px by 100px)

Without window dimension: border-box, external dimensions are 102px by 102px (as expected).

Why is box-size: border-box applied only to width, not height?

Thanks: -)

Answer 1

The solution I found for most browsers is to avoid adding borders to display: table-table items that are on display: table && Table layout: fixed. If a border is required, place it on a regular div (display: block), which is inside the table cell.

Answer 2

A box-sizing ad can be switched using model models. When you add a border-box , the sizes of the fields will be applied to the border. External dimensions will be 102px by 102px (including border).

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

But in fact, only in IE firefox and -webkit will draw 100px by 102px, because MS formats the table cell as a block level element, but firefox and -webkit not, height will allow the height of the line, if it is not specified, it will allow height . which you defined for drawing (including the border).

Answer 3

According to the W3C, elements with a: table-cell display are wrapped in a “anonymous” element of the table, so you will probably get the cells of this table as extra ones.