CSS margin property: outer margins of elements

CSS margin . . CSS .

CSS margin, , :

• margin-left;
• margin-right;
• margin-top;
• margin-bottom.

, (em, rem) . 100% , .

parent {
  width: 500px;
  height: 100px;
}
child {
  margin-left: 10%; // 500px * 10% = 50px
  margin-top: 10%; // 500px * 10% = 50px
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CSS margin .

, .

• : .
• : .
• : , .
• : , .

element {
 margin: 20px;
}

element {
 margin: 20px 30px;
}

element {
 margin: 20px 30px 40px;
}

element {
 margin: 20px 30px 40px 50px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CSS margin . , , . , , . .

. , , , .

, .

. , - . ?

CSS , - - - . , .

: . , - , , , .

, , . .

, overflow, hidden scroll, .

There is a well-known trick that allows you to align the block element in the center of the parent using external indents. To do this, you need to set the width and set the left and right margins to auto.

element {
 width: 400px;
 margin: 0 auto;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

In this case, the free space is redistributed equally on both sides of the element. This only works for block-type nodes with a specific width. If you do not set the size, the block element is stretched to the entire container, leaving no free space for indentation.