2012-02-08 45 views
412

thể trùng lặp:
What is the difference between display: inline and display: inline-block?CSS display: inline vs inline-block

Trong CSS, display có thể có giá trị của inlineinline-block. Bất cứ ai có thể giải thích chi tiết sự khác biệt giữa inlineinline-block?

Tôi đã tìm kiếm ở mọi nơi, giải thích chi tiết nhất cho tôi biết inline-block được đặt là inline, nhưng hoạt động như block. Nhưng nó không giải thích những gì chính xác "hành xử như một khối" có nghĩa là. Có tính năng đặc biệt nào không?

Ví dụ sẽ là câu trả lời hay hơn. Cảm ơn.

+26

CSS không phải là ngôn ngữ đánh dấu và 'display' không phải là thẻ. – BoltClock

+2

cek đây .. [hiển thị trong phiên bản CSS] (http://webdesign.about.com/od/styleproperties/p/blspdisplay.htm) – Fredy

+0

display: inline-block sẽ hiển thị tốt trong Firefox, Safari, Google Chrome và IE 8. Tuy nhiên, đối với các phiên bản cũ của Internet Explorer, chúng ta cần kích hoạt hasLayout và cũng sử dụng một chút hack để thiết lập hiển thị thành inline. (Xem http://bit.ly/16cxMXj để biết ví dụ.) – Ace

Trả lời

844

yếu tố Inline:

  1. tôn trọng trái & lề phải và đệm, nhưng không đầu & đáy
  2. không có thể có chiều rộng và chiều cao thiết
  3. cho phép các yếu tố khác để ngồi để họ bên trái và bên phải.
  4. xem ghi chú bên rất quan trọng về số here này.

yếu tố Block:

  1. tôn trọng tất cả những
  2. lực ngắt dòng sau khi các yếu tố khối

yếu tố Inline-block:

  1. cho phép các yếu tố khác ngồi bên trái và bên phải
  2. tôn trọng hàng đầu & lề dưới và đệm
  3. chiều cao sự tôn trọng và chiều rộng

Từ W3Schools:

  • Một yếu tố inline không có ngắt dòng trước hoặc sau nó, và nó dung nạp với HTML các yếu tố bên cạnh nó.

  • Phần tử khối có một số khoảng trắng ở trên và dưới nó và không chịu đựng bất kỳ phần tử HTML nào bên cạnh nó.

  • Phần tử khối nội tuyến được đặt làm phần tử nội tuyến (trên cùng một dòng với nội dung liền kề), nhưng nó hoạt động như một phần tử khối.

Khi bạn hình dung này, nó trông như thế này:

CSS block vs inline vs inline-block

Những hình ảnh được lấy từ this page, mà cũng nói một số chi tiết về chủ đề này.

+7

Tôi nghĩ bạn đã không đọc hết câu hỏi của tôi. Tôi đã đề cập trong câu hỏi tôi biết nó hoạt động như một phần tử khối. Tôi hỏi "hành xử như một phần tử khối" có nghĩa là gì. – user926958

+0

@ user926958 Nó có nghĩa là nó có một số khoảng trắng ở trên và dưới nó và không chịu đựng bất kỳ phần tử HTML nào bên cạnh nó.'. – Oldskool

+2

Nếu bạn thực sự thử nó, nó thực sự cho phép các phần tử bên cạnh nó. – user926958

Các vấn đề liên quan