Chính xác thì sự khác biệt giữa inlinevà inline-blockgiá trị của CSS là displaygì?

Một câu trả lời trực quan

Hãy tưởng tượng một <span>yếu tố bên trong a <div>. Nếu bạn cho <span>phần tử có chiều cao 100px và viền đỏ chẳng hạn, nó sẽ trông như thế này với

Hiển thị nội dòng

hiển thị: khối nội tuyến

hiển thị: khối

Mã: http://jsfiddle.net/Mta2b/

Các phần tử display:inline-blockgiống như display:inlinecác phần tử, nhưng chúng có thể có chiều rộng và chiều cao . Điều đó có nghĩa là bạn có thể sử dụng một phần tử khối nội tuyến như một khối trong khi chuyển nó trong văn bản hoặc các phần tử khác.

Sự khác biệt của các kiểu được hỗ trợ như tóm tắt:

• inline : chỉ margin-left, margin-right, padding-left,padding-right
• inline-block : margin, padding, height,width

display: inline;là một chế độ hiển thị để sử dụng trong một câu. Chẳng hạn, nếu bạn có một đoạn văn và muốn làm nổi bật một từ bạn làm:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

Phần <em>tử có một display: inline;mặc định, bởi vì thẻ này luôn được sử dụng trong một câu. Phần <p>tử có một display: block;mặc định, bởi vì nó không phải là một câu hay trong một câu, nó là một khối các câu.

Một phần tử display: inline; không thể có heighta widthhoặc a dọc margin. Một phần tử có display: block; thể có một width, heightvà margin.
Nếu bạn muốn thêm một heightđến <em>yếu tố, bạn cần phải đặt yếu tố này để display: inline-block;. Bây giờ bạn có thể thêm một heightphần tử và mọi kiểu khối khác ( blockphần của inline-block), nhưng nó được đặt trong một câu ( inlinephần của inline-block).

Một điều không được đề cập trong câu trả lời là phần tử nội tuyến có thể ngắt giữa các dòng trong khi khối nội tuyến không thể (và rõ ràng là chặn)! Vì vậy, các phần tử nội tuyến có thể hữu ích để định kiểu các câu văn bản và các khối bên trong chúng, nhưng vì chúng không thể được đệm nên bạn có thể sử dụng chiều cao dòng thay thế.

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Tất cả các câu trả lời ở trên đóng góp thông tin quan trọng về câu hỏi ban đầu. Tuy nhiên, có một khái quát có vẻ sai.

Có thể đặt chiều rộng và chiều cao cho ít nhất một phần tử nội tuyến (mà tôi có thể nghĩ đến) - <img>phần tử.

Cả hai câu trả lời được chấp nhận ở đây và trên trạng thái trùng lặp này là không thể nhưng điều này dường như không phải là một quy tắc chung hợp lệ.

Thí dụ:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

Các imgcó display: inline, nhưng nó widthvà heightđã được thiết lập thành công.

Câu trả lời của splattne có lẽ bao trùm hầu hết mọi thứ vì vậy tôi sẽ không lặp lại điều tương tự, nhưng: inlinevà inline-blockhành xử khác với thuộc tính directionCSS.

Trong đoạn mã tiếp theo bạn thấy one two(theo thứ tự) được hiển thị, giống như trong bố cục LTR. Tôi nghi ngờ trình duyệt ở đây tự động phát hiện phần tiếng Anh dưới dạng văn bản LTR và hiển thị nó từ trái sang phải.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Tuy nhiên, nếu tôi tiếp tục và đặt displaythành inline-block, trình duyệt sẽ tôn trọng thuộc directiontính và hiển thị các thành phần từ phải sang trái theo thứ tự, do đó, two oneđược hiển thị.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Tôi không biết nếu có bất kỳ sự kỳ quặc nào khác về điều này, tôi chỉ tìm thấy về điều này theo kinh nghiệm trên Chrome.