Why Does the Last Margin/Padding Seem to Collapse in Flexbox and Grid Layouts?

Last Margin / Padding Collapsing in Flexbox / Grid Layout

In flexbox and grid layouts, the last margin or padding of an element may appear to collapse, creating an unintended spacing issue. Understanding the underlying principles can help resolve this problem.

Addressing Margin Collapse

Potential Problem #1: Overflow Property Misinterpretation

• Margin collapse doesn't occur due to the overflow property.
• Overflow affects only content within the content box and not padding or margins, as per the CSS Box Model.

Potential Problem #2: Collapse in Standard Block Layout

• In block layouts, the last margin may not appear to collapse.
• This suggests that overflow may affect margins / paddings despite the spec.

Workaround for Margin Collapse

• Add a padding right to the parent container to create the desired spacing.
• Use the 'justify-content: space-between' property to distribute items evenly within the container, eliminating the need for margins.

Sample Code with Workarounds

Using Padding on Parent Container:

ul {
  padding-right: 30px;
}

Using 'justify-content: space-between':

ul {
  justify-content: space-between;
}
ul li {
  margin: 0;
}

Note: These workarounds may not be applicable in all scenarios, so testing and adjustments may be necessary based on the specific requirements.

The above is the detailed content of Why Does the Last Margin/Padding Seem to Collapse in Flexbox and Grid Layouts?. For more information, please follow other related articles on the PHP Chinese website!