Padding in CSS: installation methods and drawing features

According to the box model, CSS display padding or margin is the amount of padding from the outer border of an element to its content. CSS allows you to control the amount of padding for each side of the block separately or for all sides at the same time. To achieve the correct display of the element, it is important to understand the peculiarities of calculating padding.

Padding property group

There is a whole group of properties to describe padding in CSS. This is:

• padding-top - controls the size of the top margin;
• padding-right - changes the right padding;
• padding-bottom - controls the size of the bottom padding;
• padding-left - sets the left padding width.

The common property padding in CSS allows you to define all four fields in one rule. The instruction can take from one to four arguments:

4 parameters. Paddings are listed clockwise, starting from the top. This entry is used if each side has its own indent size

// padding: padding-top padding-right padding-bottom padding-left.element { padding: 10px 20px 30px 40px; }

3 parameters. If aside margins are equal, they can be grouped into one argument. Listing order: top, left and right, bottom margin

// padding: padding-top padding-right+padding-left padding-bottom.element { padding: 10px 20px 30px; }

2 parameters. Pairwise grouping of top-bottom and left-right margins

//padding: padding-top+padding-bottom padding-right+padding-left.element { padding: 10px 20px; }

1 parameter. Sets the size for all paddings at once

.element { padding: 10px; }

Place in block structure

The amount of padding in CSS is included by default in the total amount of space an element takes up.

.block1 { width: 100px; height: 100px; padding-right: 30px; padding-top: 20px; }

For the

.block1

element, the actual size will be 130px wide and 120px high. The

width

and

height properties determine the size of the content area by default, while CSS padding is measured separately.

Units of measure

You can specify the amount of padding in any distance units used in CSS - pixels, percentages, em or rem.

Important: if the padding is specified as a percentage, it will always be measured from the width of the PARENT element, even if it is a top or bottom margin.

.parent { width: 200px; height: 100px; }.block2 { height: 30px; width: 100px padding-bottom: 10% }

For block

block2 valuethe bottom padding will be 20px (10% of 200px) and the actual height will be 50px.

Unlike margins, padding in CSS cannot be less than zero. If a negative value is passed to the instruction, it will simply be ignored by the browser.

Inline element margins

Determining padding for elements with an inline display type has its own subtleties.

For blocks that are part of a line, top and bottom margins are always ignored as they might break the layout.

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

To the left and right of the

span elements, the appropriate indentation instructions will appear, but there will be no vertical line shift. In fact, the browser will set the required fields for the block, but this does not matter, since they do not affect its place in the general flow.

The CSS padding property is well supported by all browsers, including the oldest ones, and can also be animated with animation and transition statements.