Home > Article > Web Front-end > Why does an empty inline-block div gain height within a hidden container?
When using inline-block, an empty inline div element within a hidden container curiously gains height. Why does this occur, in contrast to the behavior of display:block?
Display:inline-block imparts specific formatting on the element:
When the inline-block element is empty, it assumes its basic line-height, even though there's no font or text content. This results in the element gaining a small but noticeable height, despite its empty state.
A workaround to prevent this height issue is to use a wrapper with font-size:0 to eliminate the line-height calculation:
.wrapper { font-size: 0; } .wrapper div { font-size: medium; }
Update: Understanding Inline-Block Height
Contrary to initial assumptions, the exact height of an empty inline-block element is not officially documented. However, observations and testing suggest that:
The above is the detailed content of Why does an empty inline-block div gain height within a hidden container?. For more information, please follow other related articles on the PHP Chinese website!