What is the difference between width: 100% display effect when the display type of the parent element is inline or inline-block?

width: 100% behavior difference under display attributes of different parent elements

When setting the element width: 100% , its width is calculated relative to the parent element. However, when display attribute of the parent element is inline or inline-block , there are differences in the calculation method, resulting in different display effects.

Code examples and analysis

Let's understand this difference through code examples:

Example 1: Parent element display: inline-block

<div>
  <div style="height: 100px;">Test content</div>
  <div style="display: inline-block; border: 1px solid red; padding: 10px; width: 100%;">
    This is the inline-block element</div>
</div>

In this example, the width of the inner inline-block element width: 100% is calculated based on the width of its parent element (the first div ). The parent element width is adaptively adjusted according to its content.

Example 2: Parent element display: inline

<div>
  <div style="height: 100px;">Test content</div>
  <div style="display: inline; border: 1px solid red; padding: 10px; width: 100%;">
    This is the inline element</div>
</div>

Here, width: 100% of the internal inline element is invalid. The width of the inline element is determined by its content, and width attribute does not work for it. width: 100% will not affect the width of its parent element.

Example 3: Control the width of the parent element

To more clearly demonstrate the behavior of the inline element, we modify Example 2 to set a fixed width for the parent element:

<div style="width: 800px; background-color: aqua;">
  <div style="height: 100px;">Test content</div>
  <div style="display: inline; border: 1px solid red; padding: 10px; width: 50%;">
    This is the inline element</div>
</div>

Even if width: 50% is set, the width of the inline element is still determined by its content and will not occupy 50% of the parent element.

Summarize:

width: 100% valid for inline-block elements. Its width will be adaptively adjusted according to the content of the parent element, but is invalid for inline elements. Its width is always determined by its content. width attribute does not work. Only when the parent element is a block-level element ( display: block , display: flex , etc.), width: 100% can truly occupy the entire width of the parent element.

The above is the detailed content of What is the difference between width: 100% display effect when the display type of the parent element is inline or inline-block?. For more information, please follow other related articles on the PHP Chinese website!