Khối và nội tuyến trong cách trình bày thông thường
Phần tử dạng khối như p, div thường tạo hộp bắt đầu dòng mới. Với width:auto trong bố cục thông thường, hộp chiếm phần chiều rộng khả dụng của vùng chứa. Chiều rộng còn có thể thay đổi do width, lề, đệm và viền; không chỉ do cửa sổ trình duyệt.
Phần tử nội tuyến như span, em đi trong dòng văn bản. Chữ có thể tự ngắt sang dòng khác khi vùng chứa hẹp. Vì thế cần xét cả nội dung, phông, cỡ chữ và khoảng trống của dòng, không chỉ đếm số kí tự.
Đây là hai cách trình bày cơ bản trong bài. display còn có các giá trị khác, chẳng hạn list-item cho mục danh sách và table cho bảng; không cần ép mọi phần tử vào đúng hai giá trị block hoặc inline.
Đổi cách hiển thị của span
```html
<p>Phần đầu.
<span>Dòng A</span>
<span>Dòng B</span>
Phần cuối.</p>
```
```css
p { color: navy; }
span { background-color: #fff8dc; }
```
Ban đầu hai span đi trong dòng cùng các chữ xung quanh. Thêm span { display: block; text-indent: 2em; } thì mỗi span tạo hộp dạng khối, bắt đầu dòng riêng và thụt dòng đầu. Thẻ trong HTML vẫn là span; display thay đổi cách trình bày, không đổi tên hoặc ý nghĩa phần tử.
Ẩn hộp nhưng giữ phần tử trong tài liệu
```css
span { display: none; }
```
Khi dùng quy tắc này, hai span và nội dung bên trong không còn tạo hộp để hiển thị, nên đoạn chỉ còn phần đầu và phần cuối. Mã HTML vẫn chứa hai span; bỏ quy tắc hoặc đổi lại display có thể làm chúng hiện ra. Đây khác với xóa span khỏi tệp.
Trong các ví dụ, width và height không đặt kích thước cho span nội tuyến thông thường như với div dạng khối. Tuy vậy, ảnh img nội tuyến vẫn có thể nhận kích thước: không mở rộng kết luận của span cho mọi phần tử nội tuyến.
Bài luyện
Thêm display:block cho span trong mẫu làm gì?
Tên thẻ vẫn là span.
Đúng. display đổi cách trình bày.
Nội dung và thẻ vẫn còn.
Chiều rộng còn phụ thuộc vùng chứa và CSS.
Lời giải
display:block yêu cầu span tạo hộp dạng khối. Trong mẫu, mỗi span bắt đầu dòng riêng; mã HTML vẫn dùng thẻ span. Chiều rộng không được cam kết bằng toàn màn hình trong mọi trường hợp.
Bài luyện
Điều gì đúng sau span { display:none; } trong mẫu?
CSS không tự xóa thẻ khỏi tệp.
display:none không phải đổi màu chữ.
Đúng. Phần tử và con của nó không tạo hộp hiển thị.
Quy tắc làm mất hộp hiển thị, không riêng đường viền.
Lời giải
display:none làm phần tử và nội dung con không tạo hộp trong bố cục. Thẻ vẫn còn trong HTML; bỏ quy tắc có thể làm nó xuất hiện trở lại.
Bài luyện
Một div có width:auto nằm trong vùng chứa cố định 240px, không lề/đệm/viền. Đổi cửa sổ từ 390px sang 1440px nhưng vùng chứa giữ nguyên. Trong bố cục thông thường, chiều rộng div thế nào?
Đúng. Vùng chứa khả dụng vẫn rộng 240px.
Cửa sổ không thay thế vùng chứa đã cho.
390px cũng không phải độ rộng vùng chứa.
Đây là div khối với width:auto trong dữ kiện.
Lời giải
Hộp khối width:auto trong bố cục đã nêu dùng chiều rộng khả dụng của vùng chứa. Vùng chứa vẫn 240px và không có phần cần trừ thêm, nên div vẫn rộng 240px; không suy chiều rộng chỉ phụ thuộc cửa sổ.
Đang học