CSS Padding

CSS Tutorial

CSS Padding

Padding is the space inside an element — between the content and the border.
It increases the inner spacing of a box.


1️⃣ Basic Padding


Adds 20px padding on all sides (top, right, bottom, left).


2️⃣ Individual Padding



3️⃣ Padding Shorthand


Example:



4️⃣ Shorthand Shortcuts

➤ Two values:


  • 10px = top & bottom

  • 20px = left & right

➤ Three values:


  • 10px = top

  • 20px = left & right

  • 30px = bottom


5️⃣ Padding Increases Element Size

Padding adds to width and height unless you use:



📌 Example


 

You may also like...