What box-sizing does

CSS box-sizing

    box-sizing specifies the part of an element's CSS box, to which the properties width, min-width, max-width, height, min-height, max-height apply.

    
    p {
        height: 3rem; 
        box-sizing: content-box;
    }
    
    Result: brown content box is 3rem tall
    
    p {
        height: 3rem; 
        box-sizing: border-box;
    }
    
    Result: black border box is 3rem tall