CSS / Box model

Box model

CSS-д элемент бүр дөрвөлжин хайрцаг гэж тооцогддог. Энэ хайрцаг нь дөрвөн давхаргаас бүрдэнэ. Энэ ойлголтыг box model гэдэг бөгөөд layout зохиоход заавал ойлгох ёстой үндэс суурь юм.

Box model-ийн дөрвөн давхарга

код
┌──────────────────────────────┐
│           margin             │
│  ┌────────────────────────┐  │
│  │        border          │  │
│  │  ┌──────────────────┐  │  │
│  │  │     padding      │  │  │
│  │  │  ┌────────────┐  │  │  │
│  │  │  │  content   │  │  │  │
│  │  │  └────────────┘  │  │  │
│  │  └──────────────────┘  │  │
│  └────────────────────────┘  │
└──────────────────────────────┘
  • content — текст, зураг зэрэг бодит агуулга байрладаг
  • padding — content болон border хоорондын дотоод зай
  • border — хайрцагны хүрээ шугам
  • margin — бусад элементтэй хоорондын гадна зай

Жишээ

css
.card {
  /* Агуулгын хэмжээ */
  width: 300px;
  height: 200px;

  /* Дотоод зай */
  padding: 24px;

  /* Хүрээ */
  border: 2px solid #1e293b;

  /* Гадна зай */
  margin: 16px;

  background-color: #0f172a;
}

Дээрх тохиолдолд .card элементийн нийт өргөн нь: 300px (content) + 24px + 24px (padding) + 2px + 2px (border) = 352px

box-sizing: border-box

Анхдагч тохиргоогоор (content-box) width нь зөвхөн content-ийн өргөнийг тодорхойлно. Padding, border нэмэгдэхэд нийт хэмжээ томордог — энэ нь тооцооллыг хүнд болгодог.

border-box тохируулснаар width болон height нь padding болон border-ийг багтаасан нийт хэмжээ болно:

css
/* content-box (анхдагч) */
.box-content {
  box-sizing: content-box;
  width: 300px;
  padding: 24px;
  border: 2px solid #1e293b;
  /* нийт өргөн = 300 + 48 + 4 = 352px */
}

/* border-box (зөвлөмж) */
.box-border {
  box-sizing: border-box;
  width: 300px;
  padding: 24px;
  border: 2px solid #1e293b;
  /* нийт өргөн = 300px — өөрчлөгдөхгүй */
}

Практик дээр бүх элементэд border-box тохируулдаг:

css
/* Бүх элементэд нэг дор тохируулах */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Энэ мөрийг CSS файлынхаа хамгийн дээд хэсэгт үргэлж бичнэ.

width ба height

css
.box {
  width: 300px; /* тогтмол өргөн */
  height: 200px; /* тогтмол өндөр */

  max-width: 600px; /* дээд хязгаар өргөн */
  min-width: 200px; /* доод хязгаар өргөн */

  max-height: 400px;
  min-height: 100px;
}

/* Хувиар — эцэг элементийн хэмжээтэй харьцангуй */
.full-width {
  width: 100%;
}

DevTools-д box model харах

Chrome эсвэл Firefox-д F12 дарж DevTools нээнэ. Elements tab-д элемент сонгосны дараа Styles хэсгийн доор Computed tab-д box model-ийн визуал диаграммыг харж болно.

Аль ч элемент дээр баруун товч → Inspect хийхэд тухайн элементийн бүх давхаргын хэмжээ шууд харагдана.

Практик жишээ

css
/* Хуудасны тохируулга */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Мэдэгдэл карт */
.alert {
  width: 100%;
  max-width: 480px;
  padding: 16px 20px;
  border: 1px solid #1e293b;
  border-left: 4px solid #a78bfa; /* зүүн тал онцлох */
  border-radius: 8px;
  margin-bottom: 16px;
  background-color: #0f172a;
  color: #f1f5f9;
}

/* Товч */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #a78bfa;
  border-radius: 6px;
  background-color: transparent;
  color: #a78bfa;
  cursor: pointer;
}

Дараагийн хичээлд:

Box model-ийн margin болон padding-ийг дэлгэрэнгүй авч үзнэ — shorthand бичих арга, auto margin ашиглан голлуулах, margin collapse гэж юу болдог талаар судална.

← Өмнөх хичээлФонт ба текстДараах хичээл →Margin ба padding