Css 显示：内联和显示：内联块之间的区别是什么？

CSS

显示

的

内联

和

内联块

值之间到底有什么区别？

显示：内联是一种在句子中使用的显示模式。例如，如果你有一个段落，想突出显示一个单词，你可以：

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


佩伦特式居住者莫比·特里斯蒂克·塞内特斯
这是一个著名的屠宰场。


元素有一个
显示：inline
元素有一个
显示：块
具有
显示的元素：inline不能有
高度
或
宽度
或垂直
边距
。具有
显示的元素：块可以有
宽度
、
高度
和
边距


如果要向
元素添加
高度
，则需要将此元素设置为
显示：内联块。现在，您可以向元素和每隔一个块样式（内联块的
部分）添加
高度（内联块的
部分），但它被放在一个句子中（内联块的
部分）
想象一个
元素在
中。例如，如果您给
元素一个100px的高度和一个红色边框，它在

显示：内联


显示：内联块


显示：块


代码：

具有
display:inline block
的元素类似于
display:inline
元素，但它们可以具有宽度和高度。这意味着您可以将内联块元素用作块，同时将其在文本或其他元素中流动

支持的样式差异汇总如下：


内联：仅
左边距
，
右边距
，
左边距
，
右边距
内联块：
边距
，
填充
，
高度
，
宽度
答案中没有提到的一件事是内联元素可以在行之间中断，而内联块不能（显然是阻塞）！因此，内联元素可以用于设置文本句子和其中的块的样式，但由于它们不能填充，因此可以使用行高



知识是一种美德，是一种美德，是一种美德，是一种美德。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

知识是一种美德，是一种美德，是一种美德，是一种美德。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
以上所有答案都提供了原始问题的重要信息。然而，有一种概括似乎是错误的

可以将宽度和高度设置为至少一个内联元素（我能想到的）——该元素

这两个被接受的答案都表示这是不可能的，但这似乎不是一个有效的一般规则

例如：


img{
宽度：200px；
高度：200px；
边框：1px纯红；
}
可能涵盖了大部分内容，因此我不会重复相同的内容，但是：
内联
和
内联块
与
方向
CSS属性的行为不同

在下一个代码片段中，您将看到
one-two
（按顺序）被呈现，就像在LTR布局中一样。我怀疑这里的浏览器自动将英文部分检测为LTR文本，并从左到右呈现


正文{
文本对齐：右对齐；
方向：rtl；
}
氢{
display:block；/*只是显式的*/
}
跨度{
显示：内联；
}

هذا عنوان طويل
一
二
块-元素
采用完整宽度。所有属性高度、宽度、边距、填充工作

内联-元素
根据内容获取高度和宽度。高度、宽度、页边距底部和页边距顶部不起作用。填充和左右页边距起作用。跨度和锚定示例。

内联块-
1。元素不具有完整的宽度，这就是为什么它的名称中有*inline*。所有属性，包括高度、宽度、页边顶部和页边底部，都在其上工作。这也适用于块级元素。这就是为什么它的名称中有*block*。
很好的答案！tl；dr-如果您想调整内联元素的大小，可以使用内联块作为显示类型。小更正：内联元素可以有水平边距（右、左），但没有垂直边距（上、下）。这是一个很好的答案，因为您提到了在选择
显示
值时我们可以/不能做什么。非常直观。所以唯一的区别是内联元素的height属性不能设置？@user2316667和width@user2316667和@OscarCalderon：此外，内联元素不关心垂直边距和填充，下一个元素将放置在同一行（n