The padding property

The padding property sets an element padding. The value of the property is any size units. By default, each browser can add different padding to elements. The property is a shorthand for the padding-top, padding-right, padding-bottom, padding-left properties.

Syntax

selector {
	padding: value;
}

The padding property accepts 1, 2, 3, or 4 values, separated by space:

Number	Description
`1`	One value specifies a padding on all sides of an element.
`2`	The first value sets the top and bottom padding, and the second value sets the right and left padding.
`3`	The first value sets the top padding, the second - right and left, and the third - bottom.
`4`	The first value sets the top padding, the second - right, the third - bottom, and the fourth - left.

In this case, by default the padding will be zero and the text will be pressed against the block border:

<div id="elem">
	some text...
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Now let's make the 30px padding:

<div id="elem">
	some text...
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Now the top a bottom padding will be 20px, and the right and left - 5px:

<div id="elem">
	some text...
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Now the padding at the top is 5px, on the right - 15px, at the bottom - 25px, on the left - 35px:

<div id="elem">
	some text...
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}