CSS Box Model – Veb Dizaynın Əsas Prinsipi

CSS-də hər bir element bir qutu (box) içərisində yerləşir və bu qutuların necə işlədiyini anlamaq, mürəkkəb dizaynlar yaratmaq və elementləri bir-biri ilə düzgün hizalamaq üçün vacibdir. Box Model, hər bir HTML elementinin necə göstəriləcəyini və digər elementlərlə qarşılıqlı əlaqədə necə olacağını müəyyənləşdirən əsas konsepsiyadır.

CSS Box Model nədir?

CSS Box Model, HTML elementlərinin tərkibini və onları əhatə edən mərjin (margin), sərhəd (border), dolğu (padding) və məzmun (content) sahələrini təyin edir. Bu model, elementlərin səhifədə düzgün yerləşdirilməsini, boşluqları və ölçüləri anlamağa kömək edir.

Box Model-in əsas hissələri:

1. Content (Məzmun qutusu) – HTML elementinin əsas məzmunu burada yerləşir və width, height kimi xüsusiyyətlərlə ölçüləndirilir.

2. Padding (Daxili boşluq) – Məzmun ilə sərhəd arasında boşluq yaradır.

3. Border (Sərhəd qutusu) – Padding-in ətrafında yerləşir və sərhədin qalınlığı, üslubu və rəngi müəyyən edilir.

4. Margin (Xarici boşluq) – Qutunun digər elementlərlə olan məsafəsini təyin edir.

Blok və İnline Elementlər

CSS-də bütün elementlər blok (block) və ya inline (sətirdaxili) qutu tipinə malikdir. Bu, onların səhifədə necə göstərildiyini və digər elementlərlə necə qarşılıqlı əlaqədə olduğunu müəyyənləşdirir.

• Block Elementlər:

• Hər zaman yeni sətirdə başlayır.

• width və height xüsusiyyətlərinə tabe olur.

• Mərjin, padding və sərhəd digər elementləri uzaqlaşdırır.

• Məsələn: , ,  – , , ,

• Inline Elementlər:

• Eyni sətrdə qalır, yeni sətirdən başlamır.

• width və height qəbul etmir.

• Sol və sağ boşluqlar digər elementləri uzaqlaşdırır, ancaq yuxarı və aşağıda boşluq yaratmır.

• Məsələn: , , ,

CSS-də Box Model tətbiqi

Aşağıdakı kod nümunəsi standart Box Model-in necə işlədiyini göstərir:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Bu elementin ümumi eni və hündürlüyü:

• En: 350 + 25 + 25 + 5 + 5 = 410px

• Hündürlük: 150 + 25 + 25 + 5 + 5 = 210px

Alternativ Box Model (border-box)

Standart Box Model-də, sərhəd və padding əlavə olunduqda, qutunun ölçüsü böyüyür. Alternativ modeldə (box-sizing: border-box;) isə, padding və sərhəd qutunun daxilində hesablanır.

Alternativ model üçün nümunə:

.box {
  box-sizing: border-box;
  width: 350px;
  height: 150px;
}

Bu zaman, padding və border daxilində hesablanır və ümumi ölçülər dəyişmir.

Margin Collapsing (Mərjin Birləşməsi)

İki elementin margin-ləri birləşə bilər və daha böyük olan margin qəbul edilir.

Məsələn, aşağıdakı kodda margin-bottom: 50px; və margin-top: 30px; olan iki elementin arasındakı boşluq 50px olacaq:

.one {
  margin-bottom: 50px;
}

.two {
  margin-top: 30px;
}

Border, Margin və Padding Xüsusiyyətləri

• Border (Sərhəd): border: 2px solid black;

• Margin (Xarici boşluq): margin: 20px;

• Padding (Daxili boşluq): padding: 15px;

Xüsusi tərəflər üçün istifadə edilə bilər:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Display: inline-block və Flexbox istifadə edərək Layout Yaratmaq

• display: inline-block; – Elementi inline saxlayır, amma width və height xüsusiyyətlərini qəbul edir.

• display: flex; – Elementlərə dinamik sıralanma imkanı yaradır.

Nümunə kod:

.links-list a {
  display: inline-block;
  padding: 1em 2em;
  background-color: red;
  color: white;
  text-decoration: none;
}

Pulsuz digər resurslar:

Məqalə: Flexbox-u Öyrənin və Təcrübə Edin

Məqalə: CSS Grid-i Öyrənin – Kurs

Məqalə: Nəhayət CSS Grid Layout Modulu ilə Grid-ə Keçin

 

Növbəti mövzular:

Növbəti mövzular:

CSS Basics

Layihələr Yaratmaq

Reaktiv Veb Dizayn

 

Açar Sözlər: CSS Box Model, Box Model nədir, CSS padding və margin, CSS border və ölçülər, Alternativ Box Model (border-box), Blok və inline elementlər, Margin collapsing nədir, CSS display xüsusiyyətləri, Flexbox və inline-block fərqləri, HTML və CSS tərtibatı, Responsiv dizayn və Box Model, SEO uyğun veb dizayn, Mobil uyğun Box Model tətbiqi, CSS performans optimallaşdırılması, HTML və CSS struktur planlaması, Axtarış motorları üçün optimallaşdırılmış dizayn