Qutu modeli

Leyla karta width: 300px yazdı, sonra ona bir az daxili boşluq və haşiyə əlavə etdi — və kart birdən 300 piksellik sütuna sığmadı. Niyə? Çünki brauzerin gözündə səhifədəki hər element bir qutudur və onun ölçüsü yalnız width-dən ibarət deyil. Qutu modelini başa düşən kəs CSS-də səhvlərin yarısından qurtulur.

Hər element qutudur

Qutu içəridən bayıra doğru dörd qatdan ibarətdir. Onu bağlamaya bənzətmək olar: içindəki əşya məzmundur, onu qoruyan köpük daxili boşluqdur, karton qutu haşiyədir, digər bağlamalarla arasındakı məsafə isə xarici boşluqdur.

1. content (məzmun) — mətn, şəkil və ya uşaq elementlər. Ölçüsünü width və height verir.
2. padding (daxili boşluq) — məzmunla haşiyə arasındakı boşluq. Elementin fonu buraya da yayılır.
3. border (haşiyə) — qutunun çərçivəsi: border: 2px solid teal qalınlığı, xəttin növünü və rəngi bildirir.
4. margin (xarici boşluq) — qutu ilə qonşu elementlər arasındakı şəffaf məsafə.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .margin-zone { display: inline-block; background: #fde68a; }
  .box {
    width: 200px;
    padding: 20px;
    border: 6px solid #6366f1;
    margin: 24px;
    background: #e0e7ff;
  }
</style>

<div class="margin-zone">
  <div class="box">Content: 200px wide</div>
</div>
<p>Yellow = margin, blue frame = border,<br>light blue around the text = padding.</p>

Blok və sətirdaxili elementlər

display xassəsi qutunun özünü necə aparacağını müəyyən edir. Blok elementlər (<div>, <p>, <h1>, <ul>) yeni sətirdən başlayır və bütün mövcud eni tutur. Sətirdaxili elementlər (<span>, <a>, <strong>) mətnin içində qalır, onlar üçün width və height işləmir, şaquli margin isə qonşu sətirləri itələmir. inline-block hər ikisinin üstünlüyünü birləşdirir: mətnin içində qalır, amma ölçü qəbul edir.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; line-height: 1.8; }
  .demo { background: #fde68a; border: 1px solid #f59e0b; }
  span.demo { width: 300px; }
  .ib { display: inline-block; width: 110px; text-align: center; background: #bbf7d0; }
</style>

<div class="demo">A div is a block: it takes the whole line.</div>
<p>A <span class="demo">span is inline</span>: width 300px is ignored.
  An <span class="ib">inline-block</span> accepts a width.</p>

Daxili və xarici boşluqların qısa yazılışı

Hər tərəfi ayrıca yazmaq olar: margin-top, margin-right, margin-bottom, margin-left. Amma daha çox qısa yazılış işlədilir — bir xassədə bir, iki, üç və ya dörd qiymət:

Eni verilmiş blok elementi mərkəzə gətirmək üçün sağ və sol xarici boşluğu auto et: margin: 0 auto. Brauzer qalan boş yeri iki tərəfə bərabər bölür.

<style>
  body { font-family: system-ui, sans-serif; background: #f1f5f9; padding: 12px; }
  .card {
    max-width: 260px;
    margin: 0 auto;
    padding: 12px 20px 20px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
  }
  .btn { display: inline-block; padding: 8px 16px; border-radius: 999px;
         background: #14b8a6; color: white; }
</style>

<div class="card">
  <h3>Centered card</h3>
  <p>margin: 0 auto puts me in the middle.</p>
  <span class="btn">Read more</span>
</div>

`box-sizing`: ölçünü necə hesablamalı

Adi halda box-sizing: content-box qüvvədədir: width yalnız məzmunun enidir, daxili boşluq və haşiyə isə üstünə əlavə olunur. Leylanın problemi də bu idi. box-sizing: border-box ilə isə width haşiyə daxil olmaqla bütün görünən qutunun enidir, daxili boşluq və haşiyə isə içəri doğru yer tutur. Bu, hesablamanı çox asanlaşdırır.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .ruler { width: 200px; height: 6px; background: #1e293b; margin-bottom: 8px; }
  .demo { width: 200px; padding: 20px; border: 5px solid #0ea5e9;
          margin-bottom: 12px; background: #e0f2fe; }
  .bb { box-sizing: border-box; border-color: #f97316; background: #ffedd5; }
</style>

<div class="ruler"></div>
<div class="demo">content-box: 200 + 40 + 10 = 250px</div>
<div class="demo bb">border-box: exactly 200px</div>