Q49: How does the margin-trim property simplify layout container spacing?
The margin-trim property tells block or flex/grid containers to trim outer margins of their first or last child elements automatically, eliminating traditional :first-child { margin-top: 0 } overrides.
Container Margin Trimming
.card-content {
/* Trims top margin of first child and bottom margin of last child */
margin-trim: block;
}💡 margin-trim: block strips excess outer vertical margins on container boundary children automatically.
Key Takeaways
- Trims unwanted outer margins on leading or trailing child elements inside containers.
- Eliminates manual
:first-childor:last-childCSS margin cleanup overrides.
Knowledge Check
What operational task does margin-trim perform inside layout containers?