CSS box-sizing

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