Margins are an essential spacing element of web design, dictating the amount of whitespace between a box and its surroundings.
In CSS, the margin property sets the space between adjacent elements. If the margins of two adjacent elements overlap, the larger of the two margins takes precedence while the smaller collapses in a phenomenon known as “margin collapse.”
Examples of auto margins include many Apple, Google, and Stripe products. These design leaders set their margins to an element with a defined width to horizontally center an element within the boundary of its parent. The result is clean, consistent pages with enough whitespace to focus your attention on the featured product.
Many confuse padding with margins in CSS, but padding controls the amount of breathing room inside a box, while margins act as invisible barriers on the box’s exterior. Margins are a great way to create responsive content that maintains consistent spacing across all device types.
