Why Does `vertical-align` Affect Sibling Elements, Not Just the Targeted Inline-Block Element?

Vertical-align Aligned Siblings, Not Self

Understanding vertical-align is not as straightforward as one might anticipate. As illustrated by an example, unexpectedly, applying vertical-align only to an inline-block vertically aligned everything else except the content itself. Is this the intended behavior?

Expectedly, vertical-align defines the vertical alignment of an element within its parent container. Contrary to the expectation that only the content would be aligned, the browser aligns all elements, including the p parent and text within .

To clarify, without any alignment, the and its content are rendered by the browser as equal height and vertically aligned with the top of the p.

Applying vertical-align: middle to the alters the vertical alignment of all elements within the p. The p itself is now vertically aligned with the midpoint of the 's height, and the text within remains aligned to its top, appearing as if it's not vertically aligned.

The above is the detailed content of Why Does `vertical-align` Affect Sibling Elements, Not Just the Targeted Inline-Block Element?. For more information, please follow other related articles on the PHP Chinese website!