Web tasarımında, HTML elementlerinin düzenini ve yerleşimini kontrol etmek için CSS Box Model kullanılır. Her HTML elementi, bir kutu olarak düşünülür ve bu kutu içerisinde içerik, kenar boşluğu (padding), kenarlık (border) ve dış boşluk (margin) gibi özelliklere sahiptir. CSS Box Model, bu yapıyı anlamamıza ve tasarımımızı daha etkili bir şekilde düzenlememize yardımcı olur.
Box Modelin Temel Bileşenleri:
- İçerik (Content): HTML elementinin içinde yer alan gerçek içerik. Metin, resim, bağlantı veya diğer HTML öğeleri içerik olarak kabul edilir.
.box {
content: "Bu bir içerik örneğidir.";
}
Kenar Boşluğu (Padding): İçerik ile kenarlık arasındaki boşluk. Öğenin içeriği ile sınırları arasındaki mesafeyi belirler.
.box {
padding: 20px;
}
Kenarlık (Border): İçerik ve kenar boşluğu arasındaki sınırdır. Kenarlık genişliği, stili ve rengi belirlenebilir.
.box {
border: 2px solid #3498db;
}
Dış Boşluk (Margin): Kutunun dışındaki boşluktur. Diğer elementlerden olan uzaklığı belirler.
.box {
margin: 10px;
}
Örnek Kullanım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 100px;
background-color: #ecf0f1;
padding: 20px;
border: 2px solid #3498db;
margin: 10px;
}
</style>
<title>CSS Box Model Örneği</title>
</head>
<body>
<div class="box">Bu bir kutu örneğidir.</div>
</body>
</html>
Yukarıdaki örnek, bir kutunun nasıl oluşturulacağını ve CSS Box Model’in temel özelliklerini nasıl kullanacağınızı göstermektedir. Bu temel kavramları anlamak, web tasarımınızı daha etkili bir şekilde kontrol etmenize yardımcı olacaktır.