inherit
does not always result in inheriting the exact width in pixels from its parent.
When using width:100%
, the child's width may appear smaller than the parent's due to padding on the parent element.
div.parent {
background:yellow; color:brown;
padding:0 1em;
width:20em;
}
div.child {
background:brown; color:yellow;
width:100%;
}
<div class="parent">
This is the parent
<div class="child">
This is the child
</div>
</div>
Furthermore, if a block parent with width:auto
contains an inline-block child with width:inherit
, the child's width will be set to auto
, matching the width of its contents rather than the parent element.
div.parent {
background:yellow; color:brown;
}
div.child {
background:brown; color:yellow;
width:inherit;
display:inline-block;
}
<div class="parent">
The parent (full width of the window)<br>
<div class="child">
The child (only as wide as its contents)
</div>
</div>