CSS Padding

CSS Padding is the section 14 of Beginner’s Guide to CSS.

CSS padding is the last property of the CSS Model concept. In the previous few sections we followed up the;

which are the properties of the box model.

This padding property defines the space between the element border and the element content. The padding clears an area around the content inside the border of an element. The padding is affected by the background color of the element.

Can you remember in our HTML tutorial Table section we came up with a attribute called cellpadding? You can do the same by using CSS padding property. But remember cellpadding can only be used for tables and CSS padding can be used for almost all of the HTML elements.

 

The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all padding at once.

Look at the following example. It defines the padding of each side in a paragraph element. You can use a value of a percentage or a fixed pixel (px), point (pt), centimeter (cm) value.

[code language=”css”] p {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
[/code]

Or else you can use the shorthand padding property defining all the sides with four values.

[code language=”css”] p {
padding: 25px 50px;
}
[/code]

See the difference of a paragraph element with a padding box and without a padding box.

This is a paragraph without a padding box

This is a paragraph with a padding box

This is a paragraph without a padding box

This is a paragraph with a padding box

See how ugly it looks when you don’t give any padding. So if you use any background color or an border for an element which had content inside of it, remember to give some padding so it would look nice.


In this section we use the padding property to have some blank space around the content to give it a standard look. In the next section we are going to look at creating fat elements and thin elements.

WHAT’S NEXT?

Let’s change Dimensions with CSS.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Leave a Reply

Your email address will not be published. Required fields are marked *