Why Do Two 100% Width Inline-Block Elements Overlap?

Two Inline-Block Elements Overlapping When Using 100% Width

In an attempt to create two side-by-side columns of equal width, you might use display: inline-block on the elements. However, an unexpected issue arises when these elements cumulatively occupy 100% of the parent's width: the second column wraps to a new line.

Why Does This Happen?

The reason for this behavior lies in the way inline-block elements handle white-space. By default, inline-block elements honor the white-space characters in the HTML code. When you have significant white-space between the elements, such as newlines or tabs, the elements will be separated accordingly.

Solution: Remove White-Space

To prevent the second column from wrapping, simply remove the white-space between the inline-block elements. This can be achieved by using a single line of HTML code, like the following:

<div><p>With the white-space removed, the inline-block elements will adhere to their declared widths and remain side-by-side on the first line, fulfilling the desired behavior.</p></div>

The above is the detailed content of Why Do Two 100% Width Inline-Block Elements Overlap?. For more information, please follow other related articles on the PHP Chinese website!