CSS Padding, top, bottom, left, right
Padding - Individual Sides as top, right, bottom, left
CSS has properties for specifying the padding for each side of an element top, right, bottom, left:
- padding-top
- padding-right
- padding-bottom
- padding-left
All the padding properties can have the next values:
- length - specifies a padding in px, pt, cm, etc. for top, bottom, left, right,
- % - specifies a padding in % of the width of the containing element for top, bottom, left, right,
- inherit - specifies that the CSS padding should be inherited from the parent element,
Note: Negative values are not allowed for CSS pading top, right, bottom, left
If the padding property has this four values:
padding: 12px 15px 12px 16px;
top padding is 12px
right padding is 15px
bottom padding is 12px
left padding is 16px
Example:
div-box {
padding: 12px 15px 12px 16px;
}
CSS Padding - Shorthand Property
The css padding property is a shorthand property for the following individual padding properties:
padding-top is 12px
padding-right is 15px
padding-bottom 12px
padding-left 16px
Example:
If the padding property has three values:div-box {
padding: 12px 15px 12px 16px;
}
padding: 12px 15px 14px;
top padding is 12px
right and left paddings are 15px
bottom padding is 14px
Example:
If the padding property has two values:div-box {
padding: 12px 15px 14px;
}
padding: 15px 20px;
top and bottom paddings are 15px
right and left paddings are 20px
Example:
If the padding property has one value:div-box {
padding: 15px 20px;
}
padding: 16px;
all four paddings are 16px
Example:
div-box {
padding: 16px;
}
CSS Padding and Element Width
In the following example, the <div-box> element is given a width of 450px. However, the actual rendered width of the <div-box> element will be 450px (450px + 12px of left padding + 12px of right padding):
Example:
To keep the width at 450px, no matter the amount of padding, you can use the box-sizing property as.div-box {
width: 450px;
padding: 12px;
}
width: 450px;
padding: 12px;
}
Example:
div-box {
width: 450px;
padding: 12px;
box-sizing: border-box;
}
width: 450px;
padding: 12px;
box-sizing: border-box;
}
CSS Padding, top, bottom, left, right, color, css padding vs margin, css pading inside, css padding order CSS Padding, top, bottom, left, right - css tutorial
CSS Padding, top, bottom, left, right, color, css padding vs margin, css pading inside, css padding order
CSS Padding, top, bottom, left, right - css tutorial
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout

Find here examples of creative and unique website layouts.
Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.