Thuộc tính display trong CSS block inline là gì: tìm hiểu bố cục CSS, block, inline, inline-block và none

Mỗi trang web đều có hình dáng từ một vài quy tắc cốt lõi trong bố cục CSS. Điểm khởi đầu quan trọng nhất chính là thuộc tính display. Nếu bạn từng thắc mắc tại sao một phần tử lại trải rộng khắp trang, tại sao phần tử khác lại nằm gọn trong một dòng văn bản, hoặc tại sao phần tử thứ ba lại biến mất hoàn toàn, thì câu trả lời gần như luôn nằm ở display. Bài viết này giải thích block, inline, inline-block và none thực sự làm gì với luồng tài liệu và hành vi phần tử, giúp bạn dự đoán được trang web sẽ hình thành như thế nào.

Cách tiếp cận giải thích thuộc tính display trong CSS tập trung vào hai vấn đề: phần tử tham gia vào luồng (flow) như thế nào, và phần tử xử lý kích thước ra sao. Luồng xác định liệu phần tử có chồng lên nhau theo chiều dọc, trôi theo chiều ngang cùng văn bản, hay làm cả hai. Kích thước xác định liệu width và height có hiệu lực, lề có hoạt động đối xứng hay không, và hộp có thể trở thành container cho các hộp khác hay không.

Cơ bản về luồng tài liệu

Luồng tài liệu bình thường (normal document flow) là đường dẫn bố cục mặc định. Các phần tử cấp block xếp chồng từ trên xuống dưới. Các phần tử cấp inline nằm trong các dòng văn bản và trôi từ trái sang phải. Khi bạn thay đổi display, bạn chuyển một phần tử từ mô hình tham gia này sang mô hình khác. Thay đổi đơn lẻ đó có thể ảnh hưởng đến các phần tử anh em, kích thước phần tử cha và không gian khả dụng.

Hai mô hình tư duy hữu ích: block flow nghĩa là mỗi hộp bắt đầu trên một dòng mới và thường trải rộng toàn bộ chiều rộng khả dụng; inline flow nghĩa là hộp tham gia vào dòng hiện tại và chỉ chiếm không gian cần thiết. Inline-block là dạng lai, tham gia vào inline flow nhưng vẫn tôn trọng width, height và các quy tắc nội bộ giống block.

Các phần tử block

Một phần tử block tạo thành một hộp hình chữ nhật xếp chồng cùng các hộp block khác. Theo mặc định, chiều rộng của nó trải rộng để lấp đầy containing block. Chiều cao được xác định bởi nội dung, trừ khi bạn đặt height cụ thể hoặc sử dụng kỹ thuật lấy chiều cao từ nội dung.

Các hành vi chính của hộp block:

• Bắt đầu trên dòng mới: Phần tử block tạo xuống dòng trước và sau chính nó trong phần tử cha.
• Chiều rộng đầy đủ theo mặc định: Nếu không đặt width rõ ràng, hộp sẽ lấp đầy vùng nội dung của phần tử cha.
• Trùng lề dọc: Lề trên và dưới có thể trùng (collapse) với lề của các block liền kề trong luồng bình thường — đây là đặc điểm riêng của bố cục block.
• Hành vi chứa: Hộp block có thể chứa các hộp block hoặc inline khác, tạo nên cấu trúc lồng nhau.

Sử dụng display block cho các section, article, card, nhóm điều hướng, nhóm biểu mẫu và bất kỳ thành phần nào cần xếp chồng. Ngay cả khi bạn giữ nguyên ngữ nghĩa của phần tử, việc chuyển nó thành display block sẽ khiến nó hoạt động như một khối cấu trúc cơ bản.

Các phần tử inline

Một phần tử inline nằm trong dòng văn bản và trôi cùng dòng đó. Nó không bắt đ��u trên dòng mới và chỉ chiếm không gian cần thiết cho nội dung cộng với padding và border theo chiều ngang. Đây là lý do tại sao width và height thường không có tác dụng với hộp inline.

Các hành vi chính của hộp inline:

• Trôi cùng văn bản: Hộp tham gia vào các line box và xuống dòng nếu nội dung quá dài.
• Không có kích thước block: Width và height bị bỏ qua trong luồng bình thường. Padding và border theo chiều dọc không đẩy các dòng xung quanh ra xa.
• Khoảng cách ngang hoạt động: Lề, padding và border theo chiều ngang có hiệu lực và dịch chuyển hộp trong dòng.
• Căn chỉnh line box: Căn chỉnh dọc được kiểm soát bởi các thuộc tính như vertical-align, không phải height.

Sử dụng các phần tử inline cho các đoạn văn bản nhỏ: liên kết trong câu, nhấn mạnh, đoạn mã hoặc nhãn cần nằm nguyên trong dòng hiện tại.

Các phần tử inline-block

Inline-block là dạng lai. Phần tử tham gia vào inline flow nên nó nằm bên cạnh các nội dung inline khác và có thể xuống dòng. Đồng thời, nó hoạt động như hộp block ở bên trong: width, height, padding dọc, lề dọc và border đều hoạt động như mong đợi.

Các hành vi chính của hộp inline-block:

• Tham gia inline flow: Hộp tham gia vào bố cục dòng và có thể xuất hiện bên cạnh các hộp inline hoặc inline-block khác.
• Tôn trọng kích thước: Width và height có hiệu lực, lề và padding dọc ảnh hưởng đến bố cục.
• Không trùng lề: Lề dọc không trùng với các anh em vì hộp không phải là block trong luồng.
• Khoảng trắng có ý nghĩa: Khoảng trắng HTML giữa các phần tử inline-block tạo ra khoảng trống. Bạn có thể xử lý bằng font-size: 0 trên phần tử cha, lề âm hoặc bằng cách xóa khoảng trắng trong mã nguồn.

Inline-block là công cụ thực tế cho hàng thành phần, nhóm nút bấm, đơn vị biểu tượng+vật liệu, điều khiển biểu mẫu và lưới responsive của card khi bạn muốn các mục có kích thước rõ ràng nhưng vẫn nằm trong luồng.

None và tác động lên luồng

Display none loại bỏ phần tử khỏi tài liệu hoàn toàn. Nó không tạo hộp, không chiếm không gian và không phản hồi tương tác. Các phần tử anh em và cha được bố cục lại như thể phần tử đó chưa bao giờ tồn tại. Điều này khác với visibility: hidden, vẫn giữ nguyên không gian và chặn sự kiện con trỏ.

Các trường hợp sử dụng display none phổ biến bao gồm giao diện có điều kiện, bảng điều khiển chuyển đổi và các chiến lược responsive nơi một số phần tử không nên tồn tại trên một số kích thước màn hình nhất định. Hãy lưu ý rằng trình đọc màn hình cũng bỏ qua nội dung display none, vì vậy nó chỉ nên được dùng cho nội dung thực sự không nên xuất hiện với bất kỳ ai.

Các giá trị khác thay đổi hành vi sâu hơn. Display contents loại bỏ chính hộp nhưng giữ các phần tử con trong luồng, hữu ích cho các phần tử bọc không nên ảnh hưởng đến bố cục. Các giá trị cũ như list-item hoặc table vẫn tồn tại, nhưng bố cục hiện đại thường dựa vào block, inline, inline-block, flex và grid.

Display thay đổi luồng tài liệu trong thực tế

Khi bạn chuyển một phần tử sang block, nó bắt đầu xếp chồng và trải rộng. Khi bạn chuyển sang inline, nó tham gia vào các dòng văn bản và mất khả năng sized theo block. Khi bạn chuyển sang inline-block, nó giữ inline flow nhưng lấy lại khả năng kiểm soát kích thước. Khi bạn chuyển sang none, nó biến mất và trang được bố cục lại.

Những thay đổi này ảnh hưởng nhiều hơn phần tử mục tiêu. Loại bỏ một phần tử block bằng display none cho phép các anh em di chuyển lên trên. Biến một span thành inline-block có thể tạo ra khoảng trống cần quản lý khoảng trắng. Chuyển một div từ block sang inline có thể phá vỡ nhịp dọc dự kiến.

Chọn giá trị display phù hợp

Hãy bắt đầu từ vai trò nội dung. Nếu phần tử là một section cấu trúc, block thường là lựa chọn đúng. Nếu phần tử trang trí hoặc gắn nhãn văn bản trong dòng, inline là đúng. Nếu phần tử là thành phần nhỏ cần kích thước rõ ràng nhưng vẫn nằm trong dòng, inline-block là đúng. Nếu phần tử không nên tồn tại trong bố cục, none là đúng.

Sau đó xem xét ngữ cảnh bố cục. Nếu bạn cần hàng và cột với căn chỉnh và khoảng cách, flex hoặc grid có thể tốt hơn inline-block. Nhưng các giá trị display cốt lõi vẫn cần thiết để hiểu cách các hộp tham gia vào luồng, phản hồi với kích thước và định hình trang web.

Tóm tắt

Thuộc tính display kiểm soát hai điều: phần tử tham gia vào luồng tài liệu như thế nào và phần tử xử lý kích thước ra sao. Phần tử block xếp chồng và trải rộng. Phần tử inline tham gia vào dòng văn bản và bỏ qua kích thước block. Phần tử inline-block tham gia vào dòng văn bản nhưng giữ kích thước kiểu block. None loại bỏ phần tử hoàn toàn. Nắm vững bốn hành vi này sẽ cho bạn một mô hình tư duy đáng tin cậy cho bố cục CSS và giúp bạn dự đoán bất kỳ trang web nào sẽ hình thành như thế nào.