Css cheatsheet > Box sizing

box sizing - border box

Using border-box style on your element will include border and padding within the width and height.

#css


                


<style> 
    .with-border-box{
        box-sizing: border-box;
    }

    .element-styles{
        padding: 20px;
        border: 5px solid #4dc3a4;
        width: 100px;
        height: 100px;
        display: block;
    }
</style>

<span class="element-styles">Without Border-box</span>
<span class="element-styles with-border-box">With Border-box</span>
    
    Output:

        

Without Border-box
With Border-box

copy