Box-sizing in CSS: calculating block sizes

- . , "", . , , CSS box-sizing.

CSS

, , . , , , :

• content-box, - ;
• padding-box, , ;
• border-box, (border).

, , , .

.

CSS, .

-, . , width height, .

.

.block {
  width: 200px;
  height: 100px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  border: 5px solid;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

block 200 , 230 . : 100 150.

. - . , , .

CSS box-sizing, , - .

, . width height.

CSS box-sizing content-box. , .

.block {
  box-sizing: border-box;

  width: 100px;
  border: 5px;
  padding: 10px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

box-sizing: border-box CSS , . block 100 , - 70 .

, CSS box-sizing padding-box, . , . , .

block1 {
 width: 500px;
 border: 5px;
 padding: 30px;
 box-sizing: border-box;
}

block2 {
 width: 500px;
 border: 5px;
 padding: 30px;
 box-sizing: content-box;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

box-sizing: border-box , .

//     300 

.block {
 width: 300px;
 box-sizing: border-box;

 padding: 10px;
}

//   ,     

.block {
 width: 300px;
 box-sizing: border-box;

 padding: 15px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , . .