Web Development

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.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW