css box-sizing özelliği, Html elementinin genişlik ve yükseklik değerlerinin nasıl hesaplanacağını belirlemek için kullanılır. Bu konuyu daha iyi anlamak için css kutu modelini incelemenizi tavsiye ederiz.
Aldığı değerler :
content-box : İçerik kutusu. (padding ve border genişliği elemanın genişliğine ekleriz. Varsayılan)
border-box : Kenarlık kutusu (padding ve border genişliği elemanın genişliğine eklemeyiz. )
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.one{
width: 200px;
height: 100px;
border: 20px solid red;
padding: 20px;
margin-bottom: 10px;
box-sizing: content-box;
}
.two{
width: 200px;
height: 100px;
border: 20px solid rgb(255, 0, 230);
padding: 20px;
margin-bottom: 10px;
box-sizing: border-box;
}
.three {
width: 200px;
height: 100px;
border: 20px solid blue;
padding: 20px;
margin-bottom: 10px;
box-sizing: initial;
}
.four {
width: 200px;
height: 100px;
border: 20px solid blue;
padding: 20px;
margin-bottom: 10px;
box-sizing: border-box;
}
.four-child {
width: 50px;
height: 40px;
border: 5px solid rgb(255, 0, 200);
padding: 5px;
box-sizing: inherit;
}
</style>
</head>
<body>
<div class="one">
Content One
</div>
<div class="two">
Content Two
</div>
<div class="three">
Content Three
</div>
<div class="four">
Content Four
<div class="four-child">
Child
</div>
</div>
</body>
</html>Html çıktısı:
Başka bir yazımızda görüşmek üzere…
