it_is_a_literature it_is_a_literature - 24 days ago 6
CSS Question

Why child's width does not expand into parent's width in display: table-cell?



div {
width: 100px;
height: 100px;
}
p {
margin: 0px;
padding: 0px;
display: table-cell;
width: 100%;
height: 100%;
border: 1px solid green;
}

<div>
<p>hello</p>
</div>





Now the child element p here does not expand into its' parent's width and
height: 100px
, why?
If the
display: table-cell
changed into
display: table
or others such as
block
,
the child element
<p>
here does expand into its' parent's
width
and
height :100px
.



div {
width: 100px;
height: 100px;
}
p {
margin: 0px;
padding: 0px;
display: table;
width: 100%;
height: 100%;
border: 1px solid green;
}

<div>
<p>hello</p>
</div>





Is there a rule to explain the action here?

Answer

The p with display: table-cell is rendered in an anonymous table-row box, in an anonymous table box (§17.2.1 Anonymous table objects), within the div (which then becomes this anonymous table box's containing block).

A table box doesn't expand to the width of its containing block by default (§17.5.2 Table width algorithms: the 'table-layout' property). This is true of anonymous table boxes, HTML table elements, and any other element with display: table.

Comments