Display: Inline-block trong thiết kế website là gì ?

Đặc tính Display
Trình duyệt web kết xuất các yếu tố khác nhau theo những cách rất khác nhau. Một vài yếu tố là block-lever, nghĩ là giá trị display mặc định được thiết lập là block. Các yếu tố block-lever có thể xác định chiều rộng, chiều cao và có thể tự động tạo dòng mới trong layout như cáchchúng đã được tao. Một ví dụ của yếu tố block-lever chính là paragraph. Nếu tôi quăng hai đoạn paragraph vào tài liệu HTML, chúng sẽ hiển thị trên dưới thay vì xuất hiện cạnh nhau. Các paragraph trông thoáng hơn và tôi có thể xử lý theo cách tôi muốn như thể chúng là những khối riêng biệt.

Một số yếu tố khác lại có giá trị display được thiết lập inline mặc định. Điều này có nghĩa là chúng không xác định chiều cao, chiều rộng và không tự tạo dòng mới trong layout. Các yếu tố inline nói chung là yếu tố không phải là văn bản hoặc các yếu tố block-level khác như: strong, em, anchor…

Dưới đây là những gì xảy ra nếu tôi cho tag anchor vào một tài liệu HTML. Chúng không xếp thành chồng giống như các paragraph ở trên, những yếu tố này được tạo bên cạnh nhau. Chiều rộng và chiều cao được xác định bởi nội dung nó chứa và không thể điều khiển các yếu tố block-level.

Có một vài mặc định display cơ bản khác mà bạn sẽ nhanh chóng cảm thấy quen thuộc. Ví dụ vác mục trong phần head có display là none.

Thiết lập giá trị display của bạn
Một tính năng thực sự thú vị của CSS là khả năng thay đổi hiển thị màn hình mặc định của các yếu tố. Dù một tiêu chuẩn đã được thiết lập cho một yếu tố nhất định, chúng ta có thể điều khiển cho mục đích riêng của chúng ta.

Ví dụ, chúng ta có thể dễ dàng chọn các tag inline anchor từ ví dụ thứ hai ở trên và làm cho chúng trông giống paragraph block-lever của ví dụ đầu tiên. Khi làm như vậy, nó sẽ được thiết lập display là block trong CSS của chúng ta.

Bây giờ các anchor tag giống các mục block-level, mỗi yếu tố đã tự tạo dòng mới và có giá trị chiều cao, chiều rộng tùy chỉnh.

Bạn có thể tưởng tượng rằng sẽ khó hơn khi đảo ngược ví dụ này bằng cách chọn một yếu tố block-level và tùy chỉnh giá trị display thành inline. Theo bản năng, có thể bạn sẽ sử dụng display: inline để tạo thành 2 đoạn paragraph ở trên xuất hiện kế nhau. Nhưng khi làm như vậy, kết quả chỉ là một paragraph duy nhất.

Chúng ta không còn khả năng thiết lập chiều rộng và chiều cao vì vậy hai paragraph sẽ không thể kết hợp một cách linh hoạt như những gì chúng ta muốn.

Các yếu tố float
Vậy nên nếu bạn muốn hai đoạn paragraph ở trên vẫn tách biệt nhưng xuất hiện kế bên nhau như hai cột riêng biệt thay vì theo tầng. Câu trả lời điển hình mà rất nhiều người trong chúng ta thường dùng chính là float. Bằng cách sử dụng “float: left” cho các paragraph, chúng ta có thể duy trỳ block-level trong khi vẫn tạo được nhiều cột nội dung.

Float mang đến một số tập tính thú vị. Ví dụ các mục được float có xu hướng hiển thị sụp hơn so với parent container của chúng, dẫn đến một số vấn đề lộn xộn nếu bạn đang sử dụng màu cho background hoặc border. Để giải quyết vấn đề này, bạn cần biết một vài thủ thuật. Chúng ta có thể xóa float cho yếu tố mới (thường được gọi là yếu tố giả) bằng cách sử dụng overflow: auto cho patent container. Bạn nên cẩn thận ngay cả khi đã được sửa lỗi, nhưng nếu bạn biết tận dụng đúng cách, bạn có thể kéo tất cả ra khỏi layout mà không quá khó khăn.

display: inline-block
Có rất nhiều giá trị cho display ngoài những gì chúng ta vừa đề cập ở trên, một trong số đó rất hữu ích, một số khác thì tôi cược rằng bạn chưa bao giờ sử dụng. Chủ đề của cuộc thảo luận ngày hôm nay chính là một trong những yếu tố thú vị và hữu dụng nhất, đó chính là inline-block.

Hãy xem điều gì sẽ xảy ra khi chúng ta chọn hai paragraph từ ví dụ nguyên bản ở trên vào và sử dụng giá trị display là inline-block.

Trông rất giống một float phải không? Vậy điều gì sẽ xảy ra nếu chúng ta thêm vào parent container? Liệu paragraph có hiển thị sụp xuống như khi dùng float? Không hề, tất cả mọi thứ hoạt động như những gì chúng ta mong đợi.

Những gì xảy ra ở đây là do chúng ta cho trình duyệt hiển thị paragraph inline, nhưng cho phép nó giữ lại những đặc điểm của block-level. Điều đó có nghĩa là chúng ta có thể thiết lập chiều rộng, chiều cao và vẫn có hai yếu tố khác biệt nhưng vẫn đảm bảo các paragraph xuất hiện cạnh nhau và trông khá đẹp.

Vấn đề liên quan đến alignment
Inline-block dường như là layout mà bạn mong đợi. Ai sẽ muốn với hàng tá lộn xộn trong khi có thể loại bỏ hoàn toàn với phương pháp này. Nó cũng cho thấy rằng float không phải là phương pháp duy nhất cho layout, inline-block cũng cũng có một số chức năng lạ và có thể rất càn thiết cho bạn.

Một trong những điều đầu tiên mà bạn thấy là float và inline-look trông có vẻ khác biệt khi bạn có nhiều yếu tố với chiều cao khác nhau. Ví dụ, dưới đây là những gì bạn có khi float các paragraph về phía bên trái:

Và khi bạn dùng inline-block với những yếu tố tương tự. Lưu ý rằng các cạnh dưới của các paragraph đều thẳng hàng thay vì như trước đó.

Thật may mắn vì đó không phải là vấn đề lớn. Để giải quyết vấn đề này, hãy đảm bảo bạn thiết lập cho vertical-align là top.

Vấn đề khoảng trắng
Có một vị trí quan trọng mà tập tính của inline-block khác so với float. Tôi thấy kỳ lạ bởi bất kỳ thứ gì liên quan đến HTML và CSS đều là khoảng trắng của layout nhưng đây là chính xác những gì mà tôi đã tìm thấy. Hãy cân nhắc những ví dụ bên dưới.

Ở đây chúng ta có thể thấy rằng nhóm các mục được float, chúng chồng lên nhau như chúng ta mong đợi, cho phép chúng ta khoảng cách mà không có những khoảng trống dư thừa. Tuy nhiên khi chúng ta làm tương tự với inline-block, vẫn sẽ có khoảng trống mặc định nếu chúng ta thiết lập margin là 0.

Như bạn có thể thấy, một giải pháp để những khoảng trống trong HTML và đẩy những yếu tố sát lại với nhau. Một lần nữa, tôi thấy điều này khá khó hiểu nhưng thật sự hiệu quả. Giải pháp thay thế cho cùng một kết quả mà không cần tinh chỉnh hệ thống phân cấp hình ảnh trong HTML, và bạn chỉ cần thiết lập margin là -4px trên danh sách các mục.

Trình duyệt hỗ trợ
Bây giờ chúng ta đã biết chính xác inline-block là gì và các tính năng khác biệt so với float, bây giờ là lúc chúng ta sẽ thảo luận về vấn đề luôn được ưa thích của mọi người, đó chính là trình duyệt hỗ trợ. Chúng ta sẽ phải thực hiện những gì để đảm bảo kỹ thuật này thực sự hoạt động?

Khi chúng tôi tìm thấy CanIUse.com như một câu trả lời, kết quả có vẻ tốt hơn những gì bạn đã mong đợi.

Ở đây chúng ta có thể thấy ít nhất chúng ta được hỗ trợ một phần và hỗ trợ toàn phần cho mọi thứ nhưng với phiên bạn IE7 trở lên. Lưu ý dòng dưới cùng thông báo với chúng ta rằng inline-block “chỉ hỗ trợ trong IE6 và IE7 trên các yếu tố có display ‘inline’ theo mặc định”. Điều đó có nghĩa những ví dụ về paragraph mà chúng ta đã sử dụng trong suốt bài viết này đều không được hỗ trợ.

May mắn là the Mozilla blog đã đăng một số bản sửa lỗi trong năm 2009. Để có IE độc đáo, chúng ta chỉ cần kích hoạt hasLayout với zoom property và sau đó sử dụng star hack có để IE6/7 và thiết lập display là inline. Điều này cho phép bạn hiển thị các yếu tố inline nếu chúng đã là các yếu tố inline-block. Nó chắc chắc không đẹp nhưng thật sự hiệu quả.

li {  display: inline-block;  width: 100px;  vertical-align: top;
  /*Dirty IE Hack*/  zoom: 1;  *display: inline;}

Một số bài viết khác

Nếu muốn tìm hiểu thêm về inline-block, bạn có thể tham khảo một số bài viết hữu ích mà tôi đã tìm thấy trong nghiên cứu của mình:

• Float vs. Inline-Block
• What Is Inline-Block?
• inline-block: Lots of Examples
• Cross-Browser Inline-Block

Bạn cần một giải pháp tốt hơn?
Thành thật mà nói, trước đây tôi không dùng inline-block quá nhiều nhưng tôi đã thấy rất nhiều người dùng và có rất nhiều gợi ý rằng tôi nên khám phá phương pháp này như giải pháp thay thể cho float vì vậy tôi đã thử. Tôi đã rất hy vọng nó sẽ tạo ra sự kỳ diệu, không có những vấn đề xung quanh như float nhưng sự thật không phải như vậy. Có rất nhiều đặc tính mà chúng ta không hề mong đợi và bạn cần phải biết và xử lý, kết quả là một số đoạn code như chúng ta thường thấy khi sửa lỗi với float.

Nói một cách công bằng, dù thực tế đó là cách thực hiện layout đơn giản cũng như float, Quan trọng là CSS mà bạn thực hiện cần đảm bảo tương thích với trình duyệt như briefer hơn là micro clearfix hack của Nicolas Gallagher. Nó có thể là cách tốt nhất cho rất nhiều dự án.

Cuối cùng, thành thật mà nói tôi nghĩ mình sẽ bắt đầu thêm phương pháp này như một thủ thuật của riêng mình. Tôi nghi ngờ sẽ có những phát sinh khác như sử dụng float sẽ làm cho tất cả mọi thứ ngược lại và đó lại là phương pháp thay thế tuyệt vời trong các tình huống. Tất cả đều có thể, phải không nào.