Why Do Inline-Block Elements Create Vertical Scrollbars Even with Matching Heights?

Why Does a Vertical Scroll Bar Appear When Parent and Child Have the Same Height?

Problem:

When using inline-block elements (.sideBar and .contentHolder) within a parent container (.displayContainer), an unnecessary vertical scroll bar appears despite both the parent and child elements having the same computed height.

Cause:

The default vertical-align property for inline-block elements is "baseline," which reserves space for descenders (lowercase letters that extend below the baseline). This additional space causes the container to overflow, triggering the appearance of the scroll bar.

Solution:

To eliminate the vertical scroll bar, adjust the vertical-align property on the child elements or make one of the following changes:

• Set vertical-align to a different value:

  • vertical-align: top
  • vertical-align: bottom
  • vertical-align: middle

• Switch to display: block:

  • .sideBar { display: block; }
  • .contentHolder { display: block; }

• Set line-height: 0 on the parent:

  • .displayContainer { line-height: 0; }

• Set font-size: 0 on the parent and restore it on the children (if needed):

  • .displayContainer { font-size: 0; }
  • .sideBar { font-size: 16px; }
  • .contentHolder { font-size: 16px; }

The above is the detailed content of Why Do Inline-Block Elements Create Vertical Scrollbars Even with Matching Heights?. For more information, please follow other related articles on the PHP Chinese website!