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

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

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

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

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

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

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

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

สมมติว่าในโค้ด HTML ของคุณมีหลายย่อหน้า ทำให้พวกมันมีพฤติกรรมเหมือนองค์ประกอบอินไลน์

สมมติว่าในโค้ด HTML ของคุณมีหลายลิงก์ ทำให้พวกมันมีพฤติกรรมเหมือนองค์ประกอบบล็อก กำหนดเส้นขอบ ความกว้าง และความสูงให้กับพวกมัน