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; } 

   Canlı Dene Kopyala

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; } 

   Canlı Dene Kopyala

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; } 

   Canlı Dene Kopyala

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; } 

   Canlı Dene Kopyala

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.