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

3513 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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.

5/5 - (2 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để lại một bình luận

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 *