Padding in CSS: Installation Methods and Rendering Features

According to the block model, CSS padding or a field is the indent 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 features of calculating the indentation.

Padding property group

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

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

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

• 4 parameters. Paddings are listed clockwise, starting from the top. Such a record 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 the side margins are equal, they can be grouped into one argument. The order of listing: 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 the top with the bottom and left with the right margin.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• 1 parameter. Sets the size at once for all paddings.

 .element { padding: 10px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Place in block structure

The value of padding in CSS is by default included in the total amount of space occupied by the element.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

For the .block1



element .block1



actual size will be 130px wide and 120px high. The default width



and height



properties determine the size of the content area, and padding in CSS is measured separately.

Units

You can specify the padding value in any distance units used in CSS - pixels, percent, em or rem.

Important: if the indentation is defined as a percentage, it will always be counted from the width of the PARENT element, even if we are talking about the upper or lower margin.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

For block2



lower padding will be 20px (10% of 200px), and the actual height will be 50px.

Unlike margin 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 Fields

The definition of inner indentation for elements with a lowercase type of display has its own subtleties.

For blocks that are part of a row, the values ​​of the upper and lower fields are always ignored, as they can violate the construction.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

The corresponding indentation instructions will appear to the left and right of the span



elements, 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 stream.

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