İndentlər

2.1 Daxili boşluqlar (Padding)

Daxili boşluqlar (padding) elementin məzmunu ilə onun sərhədləri arasındakı məsafəni müəyyən edir. padding hər bir tərəf üçün: yuxarı, sağ, aşağı və sol üçün təyin edilə bilər. Daxili boşluqlar, elementin məzmununun sərhədlərə sıx yapışmaması üçün ətrafında boşluq yaratmaq üçün faydalı ola bilər.

İstifadə nümunəsi

Bu nümunədə, .padding sinfinə malik elementin bütün tərəflərində 20 piksel daxili boşluqlar tətbiq edilib, məzmun ətrafında boşluq yaradılıb.

    
      .padding {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
      }
    
  

    
      <div class="padding">
        Bu daxili boşluqlara malik elementdir.
      </div>
    
  

2.2 Xarici oturumlar (Margin)

Xarici oturumlar (margin) bir element ilə qonşu elementlər arasındakı boşluğu təyin edir. Xarici oturumlar elementin hər bir tərəfi üçün təyin edilə bilər: yuxarı, sağ, aşağı və sol. Xarici oturumlar elementlər arasında boşluqlar yaratmaq və onların üst-üstə düşməsinin qarşısını almaq üçün faydalıdır.

İstifadə nümunəsi:

    
      .margin {
        background-color: #e0e0e0;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="margin">
        Xarici oturumu olan elementdir.
      </div>
    
  

2.3 Blok modelinin komponentlərinin qarşılıqlı əlaqəsi

Blok modelinin dörd komponenti (məzmun, boşluqlar, haşiyələr və xarici boşluqlar) birlikdə işləyərək elementin ümumi ölçüsünü və səhifədə yerləşməsini təyin edir.

Komponentlərin qarşılıqlı əlaqəsinə nümunə:

    
      .box {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px solid #000;
        margin: 30px;
        width: 200px;
      }
    
  

    
      <div class="box">
        Bu, xarici və daxili boşluqları olan elementdir.
      </div>
    
  

Kodun izahı:

• Məzmun: elementin içindəki mətn
• Boşluqlar: 20 piksel, məzmunla haşiyə arasındakı sahəni yaradır
• Haşiyələr: 5 piksel, elementi əhatə edir
• Xarici boşluqlar: 30 piksel, element ilə səhifədəki digər elementlər arasında sahə yaradır

2.4 Mənfi xarici boşluqlar

Xarici boşluqlar mənfi qiymətlər ala bilər ki, bu da elementlərin üst-üstə düşməsinə səbəb olur.

    
      .negative-margin {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin-top: -12px;
      }
    
  

    
      <div>
        Bu adi bir elementdir
      </div>
      <div class="negative-margin">
        Bu mənfi yuxarı boşluğa malik bir elementdir.
      </div>
    
  

2.5 Xarici boşluqların birləşməsi

İki qonşu blokun şaquli xarici boşluqları qarşılaşanda, onlar birləşə bilər və daha böyük olanın ölçüsündə tək bir boşluq yaradır.

    
      .box1 {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin-bottom: 30px;
      }

      .box2 {
        background-color: #d0d0d0;
        padding: 20px;
        border: 2px solid #000;
        margin-top: 20px;
      }
    
  

    
      <div class="box1">
        Bu birinci elementdir.
      </div>

      <div class="box2">
        Bu ikinci elementdir. Xarici boşluqlar 30 pikselə birləşdi.
      </div>