Why Does `display: inline-block` Create a Gap Above a Hidden Div?

Why Inline-Block Adds Height to Hidden Divs

When using display: inline-block on a

element, one may encounter an unexpected gap above the element when it's containing element is hidden. This behavior does not occur with display: block.

Why Does This Happen?

display: inline-block changes the line-height calculations. In an inline formatting context, the height of inline-block elements is based on their 'line-height' property. For empty inline-block elements, this translates to their basic line-height, even though they have no visible content.

Reasoning Behind the Gap

Therefore, an empty inline-block reserves a minimum line space based on its inherited line-height, usually from the

element. This reserved space manifests as a gap above the element when its container is not visible.

Quick Fix

To eliminate this gap, a quick solution is to wrap the inline-block element in a wrapper that explicitly sets font-size: 0. This ensures that there is no font and line-height, resulting in no height for the empty inline-block.

Update

The height of an empty inline-block element is not explicitly defined in official documentation. However, based on testing, it can be understood as follows:

• Empty Space: Inline-block elements reserve a line box for potential content.
• Inherited Line-Height: This line box is based on the inherited line-height from the parent element, including the element.
• Minimum Line Space: Despite empty inline-blocks not technically existing for formatting purposes, they still reserve a minimum line space.

The above is the detailed content of Why Does `display: inline-block` Create a Gap Above a Hidden Div?. For more information, please follow other related articles on the PHP Chinese website!