CSS Kutu Boyutu ve Aralık Ayarları

CSS kutu boyutu ve aralık ayarları, HTML öğelerinin düzenini ve görünümünü belirleyen temel konseptlerdir. İşte bu ayarları kontrol etmek için kullanılan bazı temel CSS özellikleri:

1. Genişlik ve Yükseklik Ayarları:

   • width ve height özellikleri, bir öğenin genişliğini ve yüksekliğini belirler.

   div {
     width: 300px;
     height: 150px;
   }
   

2. Padding (Dolaylı İçerik) Ayarları:

   • padding özelliği, içerik ile sınır arasındaki boşluğu belirler. Toplam genişliği ve yüksekliği etkiler.

   div {
     padding: 20px;
   }
   

3. Sınır (Border) Ayarları:

   • border özelliği, içeriği dolaylı içerikten ayırır ve sınıra bir çizgi veya diğer çizimler ekler.

   div {
     border: 2px solid #333;
   }
   

4. Margin (Dış Boşluk) Ayarları:

   • margin özelliği, öğenin dışındaki boşluğu belirler. Diğer öğelerden uzaklaşmasını sağlar.

   div {
     margin: 10px;
   }
   

Bu özellikler, bir HTML öğesinin kutu modelini kontrol etmek ve düzenlemek için kullanılır. Bu ayarlar bir araya geldiğinde, öğelerin birbirine olan uzaklığı, içeriklerinin genişliği ve yüksekliği, dolaylı içerikleri arasındaki boşluklar ve sınırları belirlenmiş olur. Örneğin:

div {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
}

Bu örnekte, bir <div> öğesinin genişliği ve yüksekliği belirlenmiş, içeriği dolaylı içerikle çevrelenmiş, bir sınır eklenmiş ve dışında bir boşluk bırakılmıştır.