CSS Хайрцаган загвар

HTML дээрх бүх элементүүдийг CSS-д "дөрвөлжин хайрцаг" (box) гэж үздэг. Box Model нь 4 дараалсан үеэс бүрдэнэ:

Content (Агуулга): текст, зураг эсвэл видео байрлах төв хэсэг.
Padding (Дотор зай): агуулгын эргэн тойрон дахь дотор зай.
Border (Хүрээ): padding болон content-ийг хүрээлсэн зураас.
Margin (Гадна зай): хүрээний гадна талын, бусад элементээс тусгаарлах зай.

Алтан дүрэм (box-sizing): элементэд width: 100px; padding: 10px; border: 5px solid; гэж өгвөл бодит өргөн нь 100 + 20 + 10 = 130px болно! Иймээс тооцооллыг хялбарчлахын тулд ямагт box-sizing: border-box; тохиргоог ашигладаг.

Жишээ

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box; /* Padding ба Border-ийг өргөн дотор нь багтаана */
}
div {
    width: 200px;
    padding: 20px;
    border: 5px solid #2563eb;
    background-color: #dbeafe;
}
</style>
</head>
<body>
<div>box-sizing: border-box ашигласан тул энэ хайрцаг яг 200px өргөнтэй хэвээр байна.</div>
</body>
</html>

Туршиж үзэх »