CSS 显示:内联与内联块

问题描述

在 CSS 中，display 可以有 inline 和 inline-block 的值.谁能详细解释一下inline和inline-block的区别?

我到处搜索，最详细的解释告诉我 inline-block 被放置为 inline，但行为类似于 block.但它并没有解释行为作为一个块"的确切含义.有什么特别之处吗?

一个例子会是一个更好的答案.谢谢.

解决方案

内联元素:

1. 尊重左派 &右边距和内边距，但不是 top &底部
2. 不能设置宽度和高度
3. 允许其他元素位于它们的左右两侧.
4. 请参阅此，其中还谈到了更多关于这个话题.

   In CSS, display can have values of inline and inline-block. Can anyone explain in detail the difference between inline and inline-block?

   I searched everywhere, the most detailed explanation tells me inline-block is placed as inline, but behaves like block. But it does not explain what exactly "behave as a block" means. Is it any special feature?

   An example would be an even better answer. Thanks.

   解决方案

   Inline elements:

   1. respect left & right margins and padding, but not top & bottom
   2. cannot have a width and height set
   3. allow other elements to sit to their left and right.
   4. see very important side notes on this here.

   Block elements:

   1. respect all of those
   2. force a line break after the block element
   3. acquires full-width if width not defined

   Inline-block elements:

   1. allow other elements to sit to their left and right
   2. respect top & bottom margins and padding
   3. respect height and width

   From W3Schools:

   When you visualize this, it looks like this:

   The image is taken from this page, which also talks some more about this subject.

   这篇关于CSS 显示:内联与内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！