CSS / Margin ба padding

Margin ба padding

Box model-ийн хамгийн байнга тохируулдаг хоёр property бол margin ба padding юм. Хоёулаа зай үүсгэдэг ч байрлал нь өөр — padding дотогш, margin гадагш.

Padding — дотоод зай

Content болон border хоорондын зай. Дэвсгэрийн өнгийг агуулна.

css

.card {
  background-color: #0f172a;
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Margin — гадна зай

Элементийн гадна, бусад элементтэй хоорондын зай. Дэвсгэрийн өнгийг агуулдаггүй — тунгалаг байна.

css

.card {
  margin-top: 8px;
  margin-right: 0;
  margin-bottom: 16px;
  margin-left: 0;
}

Shorthand бичих арга

Дөрвөн талыг тусад нь бичихийн оронд нэг мөрт товчилж болно:

css

/* 4 тусдаа утга: top right bottom left (цагийн зүүний дагуу) */
.box {
  padding: 8px 16px 8px 16px;
  margin: 16px 24px 16px 24px;
}

/* 2 утга: top+bottom  left+right */
.box {
  padding: 8px 16px; /* дээд/доод 8px, зүүн/баруун 16px */
  margin: 16px 0; /* дээд/доод 16px, зүүн/баруун 0 */
}

/* 3 утга: top  left+right  bottom */
.box {
  padding: 8px 16px 24px;
}

/* 1 утга: бүх тал ижил */
.box {
  padding: 16px; /* дөрвөн тал бүгд 16px */
  margin: 8px; /* дөрвөн тал бүгд 8px */
}

auto margin — голлуулах

margin: auto нь боломжтой зайг тэнцүү хуваана. Блок элементийг хэвтээгээр голлуулахад ашиглана:

css

/* Хуудасны голд байрлуулах */
.container {
  width: 100%;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  /* Товчоор: */
  margin: 0 auto;
}

Анхаар: margin: auto нь босоо (top/bottom) голлуулалтад ажиллахгүй — flexbox шаарддаг.

margin collapse

Хоёр блок элементийн босоо margin-ууд нэгдэн (хамгийн том утгаар) нэг болдог — энэ үзэгдлийг margin collapse гэнэ.

css

.box-a {
  margin-bottom: 32px;
}

.box-b {
  margin-top: 16px;
}
/* Хоёрын хоорондох зай 32px+16px=48px БИШ, харин max(32, 16)=32px болно */

Margin collapse зөвхөн босоо чиглэлд, зэргэлдээ блок элементүүдийн хооронд тохиолддог. Padding-д тохиолддоггүй.

Collapse-аас зайлсхийх арга:

css

/* Flexbox эцэг элемент collapse үүсгэдэггүй */
.parent {
  display: flex;
  flex-direction: column;
  gap: 16px; /* margin-ийн оронд gap ашиглах */
}

gap — орчин үеийн зай тохируулга

Flexbox болон Grid-д margin-ийн оронд gap ашиглах нь илүү цэвэрхэн:

css

.nav {
  display: flex;
  gap: 16px; /* хүүхэд элементүүдийн хоорондох зай */
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* мөр болон багана хоёулаа */
  row-gap: 16px; /* зөвхөн мөр хоорондын зай */
  column-gap: 24px; /* зөвхөн багана хоорондын зай */
}

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

css

/* Хуудасны дэвсгэр */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Гол агуулгын контейнер */
.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 16px; /* гар утасны талын зай */
}

/* Хэсгийн зай */
.section {
  padding: 64px 0;
}

/* Карт */
.card {
  background-color: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

/* Карт дотор гарчиг */
.card h3 {
  font-size: 1.25rem;
  color: #f1f5f9;
  margin-bottom: 8px; /* гарчиг болон текстийн хооронд зай */
}

/* Товч бүлэг */
.button-group {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

Хэзээ padding, хэзээ margin?

Padding: элементийн дотоод "амьсгал" — дэвсгэрийн өнгө, border-ийн дотор байх зай
Margin: элементүүдийн хоорондох зай — хуваалт, зогсоол

Практик дүрэм: Padding нь харагдах хэсгийн дотор, margin нь элементүүд хоорондын гадна зай.

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

border болон border-radius property-уудыг дэлгэрэнгүй үзнэ — хүрээний зузаан, хэлбэр, өнгийг тохируулах болон элементийг тойруулах талаар судална.

← Өмнөх хичээлBox model Дараах хичээл →Border ба border-radius