• Trang chủ
  • Học CSS
  • [Tự học CSS] – Tìm hiểu về cách hiển thị theo kiểu Inline-Block
92 lượt xem

[Tự học CSS] – Tìm hiểu về cách hiển thị theo kiểu Inline-Block

Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Trong bài viết trước mình có giới thiệu đến các bạn cách để hiển thị một phần tử trong trang web qua thuộc tính display. Tiếp nối bài viết trước, ở bài này mình sẽ giới thiệu một cách hiển thị theo kiểu khối nội tuyến (Inline – Block). Tại vì nó khá là quan trọng nên mình mới tách ra để giới thiệu riêng.

Hiển thị : Giá trị khối nội tuyến

So với display: inline, sự khác biệt chính là display: inline-block cho phép thiết lập chiều rộng và chiều cao trên phần tử.

Ngoài ra, với display: inline-block, các lề hoặc đáy trên cùng và dưới cùng được áp dụng, nhưng đối với display: inline thì không.

So với display: block, sự khác biệt chính là display: inline-block không thêm một ngắt dòng nào sau phần tử, do đó phần tử có thể sát bên cạnh các phần tử khác.

Ví dụ sau cho thấy sự khác nhau của display: inlinedisplay: inline-block và display: block:

Ví dụ

Sử dụng khối nội tuyến để tạo liên kết điều hướng

Một cách sử dụng phổ biến display: inline-block là hiển thị các mục danh sách theo chiều ngang thay vì theo chiều dọc. Ví dụ sau tạo liên kết điều hướng ngang:

Ví dụ

Thật đơn giản phải không nào, tuy đơn giản vậy thôi nhưng nó có ý nghĩa vô cùng quan trọng đối với một lập trình viên web nên các bạn hãy nhắm rõ nó nhé. Cảm ơn các bạn đã xem bài viết.

[Tự học CSS] – Tìm hiểu về cách hiển thị theo kiểu Inline-Block
5 (1) vote

Thẻ tìm kiếm:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *