CSS Lesson 13: Padding

0
14

Introduction to Padding

Padding is the transparent space between the border and content. It’s optional, so you’ll use it depending upon your design requirements. The purpose and nature of padding is similar to Margin , so their properties and values are similar to each other.

Padding is on all sides of the CSS Box Model , top, right, bottom and left. The Syntax of Padding is:

Padding Values

CSS Padding is defined in length, percentage and auto. The following are the value names and descriptions:

Value Name Description
Length Define a padding in px, pt, cm, etc. Default value is 0px. Negative Values are allowed.
auto To define one value on all sides. Browser automatically calculates the padding.
percentage It relies upon the width of the containing element. Negative values are allowed.

[tooltip]Tip: Try to use length value in your code, since it gives you more customized control. [/tooltip]

Side of Padding

When padding is on all four sides: top, right, bottom and left, the purpose of the Padding property is stays the same on all sides. Here’s the demonstration of every side. Note we’ll use the border property to show you the effects!

padding-top

padding-top property creates a gap from the top between the border and content. The greater the value, the greater the gap. Here’s an example:

Source Code Output

This text has a 20px padding from top.

[tooltip]It is not compulsory to have a border with padding. We used border just to give you better demonstration [/tooltip]

padding-right

padding-right property creates a gap from the right side between the border and content. Here’s an example of it

Source Code Output

This text has a 400px padding from the right.

padding bottom

padding-bottom property creates a gap from the bottom between the border and content. Here’s an example of it:

Source Code Output

This text has a 20px padding from the bottom.

padding left

padding-left property creates a gap from the left side between the border and content. Here’s an example of it:

Source Code Output

This text has a 50px padding from the left.

Padding Shorthand

Padding is applied on the four different sides and every side has a different CSS Padding property. However, you can use shorthand property to combine them.

A simple syntax of padding shorthand is

Please Note: The format and sequence of the CSS Padding shorthand property is top, right, bottom and left.

Summary

  • CSS Padding property is a transparent area between border and content.
  • Use padding-top to create a gap from the top between border and content.
  • Use padding-bottom to create a gap from the bottom between border and content.
  • Use padding-right to create a gap from the right between border and content.
  • Use padding-left to create a gap from the left between border and content.

Next Lesson

Let’s move on to another interesting CSS lesson! Outline.

Leave a Reply