Box-sizing :

Bu boyutlandırma özelliği ile elemente verdiğiniz sınır değerleri kesindir. Pading gibi iç boşluk değerlerinden etkilenmez. Böylelikle elementinizi kesin boyutlandırmanızı sağlar.

Örnek

.sizing{
     width: 200px;
    height: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer	Açıklama
content-box	Width ve height özellikleri ( ve min / max özellikleri) marjin ve dolgu(padding) sınırı etkiler.
Border-box	Width ve height özellikleri ( ve min / max özellikleri) marjin ve dolgu(padding) sınırı etkilemez.
İnital
İnherit

Tarayıcı Desteği

10.0 4.0-webkit	29.0 3.2-moz	8.0	5.1 3.1-webkit	9.5