ทำงานกับคุณสมบัติ display ใน CSS

คุณทราบแล้วว่าแท็กทั้งหมดจัดอยู่ในรูปแบบบล็อกโมเดลที่เจาะจง อย่างไรก็ตาม หากต้องการ คุณสามารถเปลี่ยนโมเดลได้โดยใช้คุณสมบัติ display โดยใช้ค่า block ของคุณสมบัตินี้ คุณสามารถทำให้องค์ประกอบเป็นแบบบล็อก และโดยใช้ค่า inline - ทำให้เป็นแบบอินไลน์

มาทำให้แท็ก span มีพฤติกรรมเหมือนองค์ประกอบบล็อกกัน:

html<span>ข้อความ</span>
<span>ข้อความ</span>
<span>ข้อความ</span>

cssspan {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

ทีนี้มาทำให้แท็ก div มีพฤติกรรมเหมือนอินไลน์:

html<div>ข้อความ</div>
<div>ข้อความ</div>
<div>ข้อความ</div>

cssdiv {
  display: inline;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат: