Padding CSS Property Syntax Explained

CSS box model explained

What is padding in CSS?

CSS padding is the gap or the empty space created between the border and the contents of the element. The CSS padding or padding CSS property is used to keep away the contents of an HTML element from touching the border of an element.

Padding can be specified in many ways. As we have explained in the margin CSS property the syntax is very much the same. The difference in padding and margins is a very important thing to notice. The new developers can be easily deceived by the result of both the properties. Keep in mind that the padding is included in the total width of an element but the margins are not. Margins and padding are the parts of a CSS box model.

CSS box model explained

How to set CSS padding?

Padding CSS property is very similar by syntax wise to the margins. They can be interchanged syntax wise but not the overall effect wise. Padding in CSS can be specified with a single statement for all the directions or you can set each value individually. Keep in mind that set a value for one side does not mean that the other values are set to zero. The existing padding for that side will be going to be applied. Now let us see the single line or short hand notations for setting padding.

Short-hand Notation for Padding

The short hand notation is very helpful in defining the padding as a set of values. The short hand notation works clockwise from top to left.

padding: 5px 10px 15px 20px;

//padding: top right bottom left;

padding: 5px 10px 5px;

//padding: top right/left bottom;

padding: 5px 10px;

//padding: top/bottom right/left;

padding: 5px;

//padding: top/right/bottom/left

In the above code you can see that there are 4 ways you can set padding using shorthand notation. With shorthand notation you can set padding for all the sides of an element. There is another way of defining padding is as well, the individual properties.

Padding-top/Padding-right/Padding-bottom/Padding-left

Here we are going to explain how you can set the padding values individually for every side of an element. These should be used very carefully because setting padding for one side does not mean that you have unspecified values of the other sides. Let us see that how we can set padding CSS property individually for all sides.

padding-top: 5px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 5px;

These are the four individual values for each side.

Things to Keep in Mind

Usually the developers make a big mistake handling padding CSS property. In the result the layout breaks or does not look like what was intended. The block level elements like <p> tag occupy the width of parent element. When you apply this padding to the element the contents will shrink inside the <p> tag. If you have set the width for <p> tag as 100% and then give the padding the <p> tag will be extended and it will go outside of its parent element. The padding is included in the total width of the element.

Learn and see more CSS tutorials here on HowToCode.PK

Comments