Sự Khác Nhau Giữa Display: Inline, Block Và Inline-block - Viblo

Trang chủ » Block Height Là Gì » Sự Khác Nhau Giữa Display: Inline, Block Và Inline-block - Viblo

Có thể bạn quan tâm

+44 Cỡ chữ 18px Độ cao hàng 1.75 Mặc định Toàn màn hình

Màu nền

Đặt lại
  • Báo cáo
  • Thêm vào series của tôi

Bài đăng này đã không được cập nhật trong 6 năm

Ở bài viết này mình sẽ phân biệt ba kiểu hiển thị:

  • display: inline
  • display: block
  • display: inline-block

display: inline

Với kiểu này thì các item sẽ nằm trên cùng một dòng, ví dụ như <span> . Nếu các items vượt quá độ dài của dòng thì item sẽ xuống dòng mới

Các item có kiểu display này không thể set width và height.

Các inline item sẽ chỉ có thể điều chỉnh margin và padding left and right (top và bottom thì không thể).

display: block

Khác với kiểu display: inline thì các item có kiểu display: block luôn được xuống dòng và chiếm toàn bộ width nếu width không được set. Ví dụ sẽ là div

Các item có kiểu display: block sẽ set được width, height, margin, padding đầy đủ 4 hướng (top, bottom, right, left).

display: inline-block

Kiểu display: inline-block sẽ được sắp xếp giống với kiểu display: inline, nghĩa là các items sẽ được xếp cùng nhau trên một dòng . Tuy nhiên các items sẽ có thuộc tính của display: block như là có set width, height, margin, padding đủ 4 hướng.

Kiểu display này sẽ thường được sử dụng để tạo thanh navbar.

CSS3

All rights reserved

  • Báo cáo
  • Thêm vào series của tôi

Mục lục

Không có mục lục

Viblo Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn. Đăng nhập Đăng kí

Từ khóa » Block Height Là Gì