Home  >  Article  >  Web Front-end  >  Why does an empty inline-block div gain height within a hidden container?

Why does an empty inline-block div gain height within a hidden container?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-02 17:01:02592browse

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:

  • Inline-Level Formatting: Elements are laid out horizontally within the container block.
  • Line-Height Calculations: Line-height is calculated differently for inline elements. For inline-block elements, it becomes the height of the margin box. For normal inline elements, it's the 'line-height' property.

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:

  • Inline-block reserves a minimum line space based on the inherited line-height, typically determined by the element.
  • This line space persists even though the inline-block is empty and should theoretically be treated as zero-height according to CSS specifications.

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn