CSS Margins

CSS Tutorial

CSS Margins

Margins create space outside an element’s border.
They push elements away from each other.


1️⃣ Basic Margin


This adds 20px space on all sides (top, right, bottom, left).


2️⃣ Individual Margins



3️⃣ Margin Shorthand


Example:



4️⃣ Shorthand Shortcuts

➤ Two values:

margin: 10px 20px;
  • 10px = top & bottom

  • 20px = left & right

➤ Three values:

margin: 10px 20px 30px;
  • 10px = top

  • 20px = left & right

  • 30px = bottom


5️⃣ Auto Margin (Centering)

Used to center block elements.



6️⃣ Margin Collapsing

Top & bottom margins of elements may combine instead of adding.


📌 Example


 

You may also like...