What is CSS padding

How to use css padding: CSS padding is the work as CSS margin because of margin used for the space outside and also padding we use for space but this is inner side. If we require for the spacing inside then we use padding.

Example: padding: 25px;

CSS padding has individual sides, CSS padding syntax is the (padding: top right bottom left).

It will support from the all sides:

.anyElement{ padding: 25px;}

It's only work from the top side:

.anyElement{ padding-top: 25px;}

It's work from the right side:

.anyElement{ padding-right: 25px;}

It's work from the bottom side:

.anyElement{ padding-bottom: 25px;}

It would be padding left side:

.anyElement{ padding-left: 25px;}

CSS padding work with width and height Example: if any any element have 300px width and padding value 25px then box will be create 350px width.

Total width = element width + padding (padding-left + padding-right)

Same for the height:

Total height = element height + padding (padding-top + padding-bottom)

If you want that not required increasing width and height of the element then we require to add a property of the CSS box-sizing value will be "border-box".

CSS padding with box sizing property: in which element using width, padding and box-sizing property then width not including width of padding and border. You can see in this example:

.anyElement1{ width: 300px; padding: 25px; background: #0bf; }

.anyElement2{ width: 300px; padding: 25px; background: #0bf; box-sizing: border-box; }

<div class="anyElement1">CSS padding box-sizing</div>

<div class="anyElement2">CSS padding box-sizing</div>