. . .

CSS Padding Property

What do you mean by CSS Padding Property?

CSS Padding Property is also used to separate a group of text or some item from others like margin property. The difference between margin and padding properties is that margin creates space outside of the mentioned div whereas padding creates space inside it.

Note:
We have to be aware that when we use padding property the width of that div must not be 100% or the web page will exceed the visual space of the device.

In CSS we can use Padding Property for individual sides:

padding-left (for padding on left side),
padding-right (for padding on right side),
padding-top (for padding on top portion),
padding-bottom (for padding on bottom portion)

Ex: We can set padding of an <p> tag in the following way:

.p
{
padding-left: 20px;
padding-right: 30px;
padding-top: 40px;
padding-bottom: 50px;
}

We can also use it by using only padding property with four values for four sides:

.p
{
padding: 20px 30px 40px 50px;
}

In the above property the four value indicates padding-top: 20px; padding-right: 30px; padding-bottom: 40px and padding-left:50px.

If we want to show show same space of padding around a text we can simply use padding property with a single value:

.p
{
padding : 50px;
}

If we use the above property then we’ll get 25px of padding on each of that paragraph i.e. padding-left: 25px; padding-right: 25px; padding-top: 25px and padding-bottom: 25px.

We can assign same space of padding on top-bottom and left-right by using two values of padding property:

.p
{
padding: 25px 50px;
}

In the above example the first value indicates padding on top and bottom portion and the second value indicates padding on left and right portion.

We can also use padding property with three values:

.p
{
padding: 20px 30px 25px;
}

In the above mention example the first value indicates padding on top portion, the second value indicates padding on left and right portion and the third value indicates padding on bottom portion.

Please share the article
Posted in CSS

Leave a Reply

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

two × 3 =