CSS Box модель /Box Model/

Бүх HTML элементийг хайрцаг буюу box хэлбэртэй гэж үздэг. CSS-д загвар зохион байгуулалт буюу Design and Layout гэсэн ойлголтыг box model гэдэг.
Box model нь margins, borders, padding, болон content бүтэцтэй байдаг бүтэцтэй байдаг. Доорх зурган дээрээс харна уу.

Тайлбар

• Content - Текст, зураг гарчиг гэх мэт мэдээллийг агуулна
• Padding - Content-с хүрээ хүртэл авах зай
• Border - Padding болон Content-г агуулсан хүрээний хэл юм.
• Margin - нь хүрээний хэлний гаднаас авах зай юм.

<style>
div {
    background-color: orange;
    color: white;
    width: 400px;
    border: 10px solid #3f9ce8;
    padding: 60px;
    margin: 30px;
}
</style>

Элементийн Өргөн ба Өндөр

Өргөн болон өндрийг зөв бүх интернет хөтчид тохируулахын тулд box буюу хайрцгийн загвар хэрхэн ажилладаг болохыг мэдэх шаардлагатай.

<style>
div {
  width: 370px;
  padding: 10px;
  border: 5px solid #3f9ce8;
  margin: 0;
}
</style>

Нийт элементийн өргөнийг дараах байдлаар тооцоолно

Нийт элементийн өргөн = width + left-padding + right-padding + left-border + right-border + left-margin + right-margin

Нийт элементийн өндрийг дараах байдлаар тооцоолно

Нийт элементийн өндөр = height + top-padding + bottom-padding + top-border + bottom-border + top-margin + bottom-margin

Сэтгэгдэлүүд