Tutorial Manthra

Padding is used to create space inside an element, between the actual content (like text or an image) and the element’s border. Think of it as the “inner cushion” of a box. Unlike margins, padding does take on the background color of the element.

Individual Padding Sides

CSS allows you to specify exactly how much space you want on each side of the content. This is useful when you want asymmetrical spacing, such as a button that has more space on the sides than on the top.

• padding-top: Space between the top of the content and the top border.
• padding-right: Space between the right of the content and the right border.
• padding-bottom: Space between the bottom of the content and the bottom border.
• padding-left: Space between the left of the content and the left border.

Example Code:

.pa-article-box {
  background-color: lightgrey;
  border: 1px solid black;
  /* Defining each side separately */
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Output

The Padding Shorthand Property

To reduce the number of lines in your CSS file, you can use the padding shorthand property. It follows a specific order based on how many values you provide.

• Four Values : padding: top right bottom left; (Clockwise order from top)
  • margin: 10px 20px 30px 40px; (Top is 10, Right is 20, Bottom is 30, Left is 40)
• Three Values : padding: top horizontal bottom;
  • margin: 10px 20px 30px; (Top is 10, Left/Right are 20, Bottom is 30)
• Two Values : padding: vertical horizontal;
  • margin: 10px 20px; (Top/Bottom are 10, Left/Right are 20)
• One Value : padding: all-sides;
  • margin: 10px; (All four sides are 10px)

Example Code

.pad1{
  /* top is 10px, right is 20px, bottom is 30px, left is 40px */
  padding: 10px 20px 30px 40px;
}
.pad2{
   /* top is 10px, left and right are 20px, bottom is 30px */
   padding: 10px 20px 30px;
}
.pad3{
   /* top and bottom are 10px, left and right are 20px */
  padding: 10px 20px;
}
.pad4{
  /* all four paddings are 25px */
  padding: 25px;
}

Output

Padding and Element Width

A common mistake in CSS is forgetting how padding affects the total width of an element. By default, padding is added to the width.

The Problem:

If you have a <div> with width: 300px and you add padding: 25px, the actual visible width of the element becomes 350px ($300 + 25\text{ left} + 25\text{ right}$).

The Solution:

Use the box-sizing: border-box; property. This forces the padding to be part of the width, not an addition to it.

Example Code:

.fixed-box {
  width: 300px;
  padding: 25px;
  /* The total width stays 300px; content shrinks to 250px */
  box-sizing: border-box; 
}

Output

Padding Mix up Units

while specifying the shorthand property you can mix up multiple units for specifying the padding value . That means the length value can be passed as pixels along with ems or inches, etc.

Example Code

.pac-mix{
            padding: 40px 8ex .1in 6em; 
            background-color: FF0;
        }

Output Code

Summary Table: CSS Padding Properties