CSS Padding - A Comprehensive Guide to Padding Properties

In CSS, the padding property is used to control the space inside an element, between the content and the element's border. Padding helps create breathing room around an element's content.

Syntax:

padding: <value>;

Value: Can be a length (e.g., px, em, %), or keywords like inherit.

Example

div {

margin: 50px;

}

Try it yourself

Individual Paddings:

You can specify padding for each side of the element individually using these properties:

padding-top
padding-right
padding-bottom
padding-left

Example

div {

padding-top: 10px;

padding-right: 20px;

padding-bottom: 30px;

padding-left: 40px;

}

Try it yourself

Shorthand for Paddings:

Like margin, padding also has shorthand for setting different values for the sides in one declaration:

Syntax:

padding: <top> <right> <bottom> <left>;

Example

div {

padding: 10px 20px 30px 40px;

}

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.