Nearby lessons
9 of 19↔️ CSS Margin Properties
📌 What are CSS Margin Properties?
CSS Margin Properties control the space around HTML elements, outside of their borders. They are essential for creating separation between elements and improving layout structure.
Margins can be set individually (top, right, bottom, left), or using shorthand notation with 1 to 4 values. You can also use auto or even negative margins to shift elements.
📏 Margin Shorthand (All sides)
The margin property sets all four margins using one value.
Code Example
🔄 Individual Margins
You can set margin-top, margin-right, margin-bottom, and margin-left separately for more control.
Code Example
↕️ Margin - Two Values
The margin property can take two values: vertical (top & bottom) and horizontal (left & right).
Code Example
🧭 Margin - Three Values
With three values: first is top, second is left & right, third is bottom.
Code Example
🧭 Margin - Four Values
Four values are applied in clockwise order: top, right, bottom, left.
Code Example
🎯 Margin Auto
Use margin: auto; to center block elements horizontally (requires fixed width).