Learn how to build and design websites with our tutorials.

CSS Padding Tutorial

View Tutorial Contents


The CSS padding property allows you to set the amount of space between the element border and the element content.

The Box Model

The image below shows you how the margin, padding, border and the HTML element fit together. This is referred to as the box model.

CSS Box Model


CSS Padding Properties

You can set the top, right, bottom and left padding of an HTML element individually or all at once using either the shorthand padding property or one of the individual padding properties shown below.

The list below shows you the possible padding properties.


CSS Padding Property Values

The possible values of the padding property are listed below.

Value Description
length px, pt, cm, em, etc. (default value is 0px)
% You can set the padding as a percent of the width of the containing element

Individual Padding Properties

The CSS example below shows you how to use the individual padding properties to set the padding of an HTML element.


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


CSS Shorthand padding Property

The CSS padding property allows you to set the padding of an HTML element in one declaration. The padding property can have from one to four values.

The CSS example below shows you how to set the padding of an HTML element with only one value.


.box{
padding: 0px;
}

The CSS example below shows you how to set the padding of an HTML element using four values. The first value sets the top padding, the second value sets the right padding, the third value sets the bottom padding and the last value sets the right padding.


.box{
padding: 0px 25px 50px 100px;
}

The CSS example below shows you how to set the padding of an HTML element using three values. The first value sets the top padding, the second value sets the right and left padding and the last value sets the padding margin.


.box{
padding: 25px 50px 100px;
}

The CSS example below shows you how to set the padding of an HTML element using two values. The first value sets the top and bottom padding and the last value sets the right and left padding.


.box{
padding: 50px 100px;
}