CSS Padding

Remember margins? Recall how margin is the space around an element which gives you the comfortable or compact feel and look on a webpage. Margin clears the area outside the border of an element. Padding is similar to margin, but not the same. Confused? Read on.

Padding clears the area inside the border of the element. It introduces extra space between the boundary and the content of the element. Just like the margin property, padding has a shorthand property that sets the padding for all the four sides. It can also be set individually.

Syntax:

padding: value1 [value2 value3 value4] | inherit

Where each padding value is either a length, percentage value, auto, or inherit from the parent element.

A padding of 40px, padding:40px; means an extra space of 40px will be added around the content of the element on all the sides.

Here is a video to explain all about padding property.

Live Example →

Video Transcript:

The overall behaviour of padding property is similar to margin property, the one major difference between the margin and the padding property is that unlike margin, padding cannot take negative values.

Elements may have default padding on them and these values may vary. If you want to reset all paddings to zero and then add your own values, you can use a wildcard rule like *{ padding: 0; } to clear all paddings.

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 4+
• Firefox 1+
• Opera 3.5+
• Safari 1+
• Chrome 1+

That was all about padding. Now you must be thinking, what next? Well next up, we will learn how to position elements on a webpage.