Box-sizing

by AdrianOber

HTML

<body>

<h2>Fara box-sizing</h2>
<div class="div1">Div mai mic (width este 300px si height e 100px).</div>
<br>
<div class="div2">Div mai mare (width este la fel: 300px si height e 100px).</div>

<h2>Cu box-sizing</h2>
<div class="div3">Ambele div-uri sunt de aceleasi dimensiuni!</div>
<br>
<div class="div4">Well done!</div>

</body>

CSS

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
}

.div3 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div4 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}