Role of padding in HTML

Specify a value for padding-Width

padding: padding-top/padding-right/padding-bottom/padding-left;

p#onepaddings
{
padding:12px;
}

The inner padding of all edges is 12px.

It is equivalent to the following definition.

p#onepaddings
{
padding-top-width:12px;
padding-right-width:12px;
padding-bottom-width:12px;
padding-left-width:12px;
}

Specify two values for padding-Width

padding: padding-top/padding-bottom padding-right/padding-left;

p#threepaddings
{
padding:12px 5%;
}

The padding value is 12px, And the padding value is 5% (relative to the entire page ).

It is equivalent to the following definition.

p#threepaddings
{
padding-top-width:12px;
padding-right-width:5%;
padding-bottom-width:12px;
padding-left-width:5%;
}

Specify three values for padding-width.

padding: padding-top padding-right/padding-left padding-bottom;

p#threepaddings
{
padding:12px 5% 0;
}

The inner padding is 12px, the inner padding is 5% (relative to the entire page), and the inner padding is 0.

It is equivalent to the following definition.

p#twopaddings
{
padding-top-width:12px;
padding-right-width:5%;
padding-bottom-width:0;
padding-left-width:5%;
}

Specify four values for padding-Width

padding: padding-top padding-right padding-bottom padding-left;

p#fourpaddings
{
padding:12px 5% -12px auto;
}

The padding value on the top is 12px, the padding value on the right is 5% (relative to the entire page), and the padding value on the bottom is-12px. the padding value on the left is automatically adjusted based on the browser.

If the padding attribute is followed by four values, the distribution order of values is clockwise from the top.

It is equivalent to the following definition.

p#fourpaddings
{
padding-top-width:12px;
padding-right-width:5%;
padding-bottom-width:-12px;
padding-left-width:auto;
}