Phần tử Khối
- Mỗi phần tử khối chiếm một dòng riêng, ngăn chặn các phần tử khác ở cùng dòng.
- Cho phép tùy chỉnh chiều cao, chiều rộng, độ cao dòng và các đường biên trên/dưới.
- Nếu không chỉ định chiều rộng, nó sẽ mở rộng đến giới hạn của phần tử cha.
Ví dụ về các phần tử khối: div, p, h1-h6, form, ul, ol, dl, dt, dd, li, table, tr, td, th, hr, blockquote, address, header, section, article, footer.
Phần tử Nội Dòng
- Có thể xuất hiện cùng dòng với các phần tử khác mà không cần bắt đầu một dòng mới.
- Không cho phép điều chỉnh chiều cao, chiều rộng và các đường biên trên/dưới.
- Chiều rộng phụ thuộc vào nội dung bên trong (ví dụ: văn bản, hình ảnh).
Ví dụ về các phần tử nội dòng: span, img, a, label, input, abbr, em, big, cite, i, q, textarea, select, small, sub, sup, strong, u, button.
Ví dụ minh họa:
<!DOCTYPE html>
<html>
<head>
<title>Khác biệt giữa khối và nội dòng</title>
<style>
.phanTuKhong1 { background-color: red; }
.phanTuNoiDong1 { background-color: yellow; }
</style>
</head>
<body>
<div class="phanTuKhong1">Tôi là phần tử khối 1</div>
<div class="phanTuKhong1">Tôi là phần tử khối 2</div>
<span class="phanTuNoiDong1">Tôi là phần tử nội dòng 1</span>
<span class="phanTuNoiDong1">Tôi là phần tử nội dòng 2</span>
</body>
</html>Thay đổi hiển thị từ khối sang nội dòng và ngược lại:
display: block;- Hiển thị như phần tử khối.display: inline;- Hiển thị như phần tử nội dòng.display: inline-block;- Kết hợp tính chất của cả hai, cho phép chỉnh sửa kích thước và các đường biên.
Ví dụ về việc thay đổi kiểu hiển thị:
<!DOCTYPE html>
<html>
<head>
<title>Thay đổi kiểu hiển thị</title>
<style>
.phanTuKhong1 { background-color: red; display: inline; }
.phanTuNoiDong1 { background-color: yellow; display: block; }
</style>
</head>
<body>
<div class="phanTuKhong1">Tôi là phần tử khối 1</div>
<div class="phanTuKhong1">Tôi là phần tử khối 2</div>
<span class="phanTuNoiDong1">Tôi là phần tử nội dòng 1</span>
<span class="phanTuNoiDong1">Tôi là phần tử nội dòng 2</span>
</body>
</html>Một số lưu ý khác:
- Phần tử khối có thể chứa phần tử nội dòng, khối hoặc nội dòng-khối.
- Phần tử nội dòng chỉ có thể chứa nội dung nội dòng hoặc nội dòng-khối.
- Một số phần tử khối đặc biệt không thể chứa các phần tử khối khác: h1-h6, p, dt.
Ví dụ về vấn đề lồng nhau:
<div>
<span>
<p></p>
</span>
<p></p>
<input type="text">
</div>Khi chạy mã sau, bạn sẽ thấy rằng phần tử div tự động thoát khỏi phạm vi của phần tử p:
<p style="background-color:bisque;">
<div style="background-color: blue; height:20px;"></div>
</p>