Padding in css

In this article we are going to learn about padding, left padding, right padding, top padding and bottom padding in css, how to give extra space between element content and element margin according to our design.

We learnt about css in general learning what css can do in web pages, fonts in css, colors in css and background colors in css so, now we are going to learn about padding to give enough space between element margin and text.

Padding

We use padding in Cascading Style Sheets to give space between element content and the element margin, if we wand the text in element to be extra distance from element margin we can use the padding to give us that space.

Left padding

Left padding gives space between element content and element margin on the left side of content. So, we are going to create element with content and apply 20px left padding style, copy and paste below code.

<div style="background: yellow; padding-left: 20px;">This is a div element with 20px left padding.</div>

So, we should have the following results.

This is a div element with 20px left padding.

Let us create element with no padding, copy and paste below code.

<div style="background: yellow;">This is a div element with no padding.</div>

So, we should have the following results.

This is a div element with no padding.

So, we can see that there is a difference between two elements with and without left padding, the element with left padding has extra space between the element margin and content on the left while the element with no left padding has no space between the element content and marging on the left.

Right padding

Right padding gives space between element content and element margin on the right side of content. So, we are going to apply 20px right padding on a div element, copy and paste below code.

<div style="background: yellow; padding-right: 20px;">This is a div element with 20px right padding.</div>

So, we should have the following results.

This is a div element with 20px right padding.

Top padding

Top padding gives space between element content and element margin on the top side of content. So, we are going to apply 20px top padding on a div element, copy and paste below code.

<div style="background: yellow; padding-top: 20px;">This is a div element with 20px top padding.</div>

So, we should have the following results.

This is a div element with 20px top padding.

Bottom padding

Bottom padding gives space between element content and element margin on the bottom side of content. So, we are going to apply 20px bottom padding on a div element, copy and paste below code.

<div style="background: yellow; padding-bottom: 20px;">This is a div element with 20px bottom padding.</div>

So, we should have the following results.

This is a div element with 20px bottom padding.

Padding to all sides

Padding to all sides gives space between element content and element margin to all sides of content. So, we are going to apply 20px padding to all sides on a div element, copy and paste below code.

<div style="background: yellow; padding: 20px;">This is a div element with 20px padding to all sides.</div>

So, we should have the following results.

This is a div element with 20px padding to all sides.

Conclusion

In this article we learnt about padding, left padding, right padding, top padding and bottom padding in css, how to give extra space between element content and element margin according to our design with examples and we can notice that the element with padding increases its size due to applied padding.