Làm việc với thuộc tính display trong CSS

Bạn đã biết rằng tất cả các thẻ đều thuộc về một mô hình khối nhất định. Tuy nhiên, nếu muốn, bạn có thể thay đổi mô hình bằng thuộc tính display. Với giá trị block của thuộc tính này, bạn có thể biến phần tử thành phần tử khối, và với giá trị inline - thành phần tử nội dòng.

Hãy làm cho các thẻ span hoạt động như các phần tử khối:

<span>text</span>
<span>text</span>
<span>text</span>

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

Và bây giờ hãy làm cho các thẻ div hoạt động như các phần tử nội dòng:

<div>text</div>
<div>text</div>
<div>text</div>

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

Giả sử trong mã HTML của bạn có một số đoạn văn. Hãy làm cho chúng hoạt động như các phần tử nội dòng.

Giả sử trong mã HTML của bạn có một số liên kết. Hãy làm cho chúng hoạt động như các phần tử khối. Đặt cho chúng đường viền, chiều rộng và chiều cao.