CSS Дэлгэцийн горим

display шинж чанар нь элемент дэлгэцэнд хэрхэн харагдах, хэрхэн байрлахыг шийддэг хамгийн чухал шинжүүдийн нэг юм.

block: дэлгэцийн бүх өргөнийг эзэлж, шинэ мөрнөөс эхэлнэ (жишээ нь <div>, <p>, <h1>). Өндөр, өргөн тохируулж болно.
inline: зөвхөн агуулгын өргөнийг эзэлж, нэг мөрөнд цуварч байрлана (жишээ нь <span>, <a>). Өндөр, өргөн тохируулах боломжгүй!
inline-block: мөрөнд цуварч харагдах боловч width болон height өндөр өргөнийг авдаг давуу талтай.
none: элементийг дэлгэцээс бүрэн нууна (бүтэц болон зай нь устсан мэт харагдана).

Жишээ

<!DOCTYPE html>
<html>
<head>
<style>
.block-demo { display: block; background: #dbeafe; margin-bottom: 5px; }
.inline-demo { display: inline; background: #fef08a; }
.inline-block-demo { display: inline-block; width: 100px; background: #bbf7d0; padding: 5px; }
</style>
</head>
<body>
<span class="block-demo">block элемент</span>
<span class="inline-demo">inline 1</span><span class="inline-demo">inline 2</span>
<span class="inline-block-demo">inline-block</span><span class="inline-block-demo">inline-block 2</span>
</body>
</html>

Туршиж үзэх »