Хөөвөр хоорондын зай ба дэвсгэр
Хөвөө болон дүүргэлтийн хоорондох ялгаа нь CSS-ийн чухал тал бөгөөд захын зай ба дүүргэлт нь CSS-д өөр өөр зүйлсийн хоорондох зайг хангах хоёр чухал ойлголт юм. Дотор болон захын зайг сольж болохгүй бөгөөд өөр өөр зорилготой тул зохих ёсоор ашиглах ёстой. Дүүргэгч нь блокийн агуулга ба хүрээ хоорондын зай юм. Нөгөө талаас зах нь блокийн хилийн гаднах зай юм. Маржин нь блокуудыг зэргэлдээх блокуудаас тусгаарладаг бол дэвсгэр нь хүрээг контентоос тусгаарладаг.
Padding гэж юу вэ?
CSS (Cascading Style Sheets) дээр дүүргэх нь контент болон хүрээ хоорондын зай юм. Энэ нь блокийн агуулгыг ирмэгээс нь тусгаарладаг. Дүүргэгч нь тунгалаг бөгөөд элементийн дэвсгэр зураг эсвэл дэвсгэр өнгийг агуулдаг. Элементийн дүүргэлтийн хэмжээг CSS кодын "padding" гэсэн нэр томъёогоор тодорхойлно. Жишээлбэл, агуулгын эргэн тойронд 25 пикселийн дэвсгэр нэмэхийн тулд дараах кодыг ашиглаж болно.
див {
өргөн: 300px;
өндөр: 300px;
дуулгах: 25px;
хүрээ: 25px хатуу;
}
Шаардлагатай бол зүүн, баруун, дээд, доод хэсэгт өөр өөр дэвсгэр утгыг тусад нь зааж өгч болно. Дараах код нь тал бүрд өөр өөр дүүргэх утгыг зааж өгсөн болно.
див {
өргөн: 300px;
өндөр: 300px;
дотоожтой: 25px;
доод дэвсгэр: 35px;
зүүн жийргэвч: 5px;
зүүлгэх-баруун: 10px;
хүрээ: 25px хатуу;
}
Маржин гэж юу вэ?
CSS (Cascading Style Sheets) дээр зах нь хилийн гаднах зай юм. Энэ нь блокыг бусад блокоос тусгаарладаг. Хөвөө нь мөн тунгалаг боловч дэвсгэрийн том ялгаа нь тухайн элементэд хэрэглэсэн дэвсгэр зураг эсвэл дэвсгэр өнгийг оруулаагүй явдал юм. CSS дахь маржингийн хэмжээг "маржин" гэсэн нэр томъёог ашиглан тодорхойлно. Дараах код нь div блокийн эргэн тойронд 25 пикселийн зайг ашигласан.
див {
өргөн: 320px;
өндөр: 320px;
хүрээ: 5px хатуу;
маржин: 25px;
}
Блокны өөр өөр талуудад өөр өөр утгыг мөн зааж өгч болно. Дараах код нь тал бүрт өөр өөр захын утгыг хэрэглэнэ.
див {
өргөн: 320px;
өндөр: 320px;
хүрээ: 5px хатуу;
дээд талын зай: 25px;
захын доод: 35px;
зүүн талын зах: 5px;
баруун талын зах: 10px;
}
Margin болон Padding хоёрын ялгаа нь юу вэ?
• Дүүргэлт нь хүрээ ба контентын хоорондох зай, харин зах нь хилийн гаднах зай юм.
• Дүүргэлт нь блокийн агуулгыг хилээс тусгаарладаг. Маржин нь нэг блокыг нөгөө блокоос тусгаарладаг.
• Дүүргэлт нь агуулгад хэрэглэсэн дэвсгэр зураг болон дэвсгэр өнгөнөөс бүрдэнэ, харин захын зайд ийм агуулга байхгүй.
• Зэргэлдээх блокуудын ирмэгүүд давхцаж болно, харин дэвсгэр нь давхцахгүй.
Тойм:
Padding vs Margin
Padding нь блокийн хүрээ доторх хүрээг контентоос тусгаарлах зай юм. Зэргэлдээх блокуудаас блокыг тусгаарлах хилийн гаднах зайг захын зай гэнэ. Өөр нэг ялгаа нь дүүргэлт нь агуулгын эргэн тойронд хэрэглэгдэх дэвсгэр зураг болон дэвсгэр өнгийг агуулдаг бол захын зай нь тэдгээрийг агуулдаггүй. Хөтөч хуудсыг дүрслэх үед зэргэлдээх блокуудын захын зай заримдаа давхцаж болох ч бөглөхөд ийм зүйл болохгүй.
