inline和之间的区别到底是什么inline-block的CSS值display？

css display

— 洛格什·保罗（Logesh Paul）
source

1351

视觉答案

想象一个元素<div>。例如，如果您将元素的高度设置为100px并带有红色边框，则其外观如下所示：

显示：内联

显示：内联

显示：内联块

显示：内联块

显示：块

在此处输入图片说明

代码：http：//jsfiddle.net/Mta2b/

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

支持的样式的不同之处为摘要：

内联：只margin-left，margin-right，padding-left，padding-right
内联块：margin，padding，height，width

— 喷溅
source

6

很有直觉。那么唯一的区别是不能设置内联元素的height属性？

— user2316667 2014年

7

@ user2316667和宽度

— 奥斯卡·卡尔德隆

2

@ user2316667和@OscarCalderon：此外，内联元素不关心垂直边距和填充，下一个元素将放置在同一行（其后没有换行）。块元件等作为p，div获得整个宽度线（强制换行），但相对于宽度/高度和所有水平/垂直填充/利润率。内联块元素具有与块相同的行为，但没有整个换行符（其他元素可以放在它们旁边）

— S.Serpooshan

1

padding-top和padding-right也会影响嵌入式元素的显示效果，从而导致混乱。

— tomwang1013年

2

@ manuman94不，这并不意味着。对于所有不同的显示类型，都有用例。

— splattne

126

display: inline;是在句子中使用的显示模式。例如，如果您有一个段落并想突出显示一个单词，则可以执行以下操作：

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

该元素有一个display: inline;默认情况下，因为这个标签是在一个句子总是使用。该元素display: block;默认情况下有一个，因为它既不是句子，也不是句子，而是句子的一部分。

的元素display: inline; 不能具有height或width或垂直margin。有一个元素display: block; 可以有width，height和margin。
如果您想将添加height到元素，你需要设置这个元素display: inline-block;。现在，您可以height在元素和其他所有块样式（的block一部分inline-block）中添加a ，但将其放置在句子中（的inline一部分inline-block）。

— 伍特
source

11

好答案！ tl; dr-如果要调整行内元素的大小，则可以使用行内块作为显示类型。

— 容易出错，2013年

7

小修正：内联元素可以有水平边距（右，左），但不能有垂直边距（上，下）

— Whyleee 2014年

1

好的答案，因为您提到了选择一个display值时我们可以/不能做的事情。

— ha9u63ar 2015年

14

答案中未提及的一件事是，内联元素可以在行之间中断，而内联块不能（显然是块）！因此，内联元素可用于设置文本句子和其中的块的样式，但是由于无法填充它们，因此可以改用行高。

<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>

展开摘要

— 阿里
source

6

以上所有答案均对原始问题提供了重要信息。但是，有一个概括似乎是错误的。

可以将宽度和高度设置为至少一个内联元素（我能想到）–该<img>元素。

此处和在此重复状态下都接受了答案，这是不可能的，但这似乎不是有效的一般规则。

例：

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

<img src="#" />

展开摘要

该img有display: inline，但它width并height已成功设置。

— 亚历山大84
source

2

实际上，img-tag将display-inline作为其默认显示值。这就是为什么可以设置宽度和高度的原因。

— 亚历克斯（Alex）

img是一个内联元素-> developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elements ...因此，基本上，您在说的或多或少与我所说的完全相同，并且您在投票？

— alexandros84

7

不，我不是。img-tags是“已替换元素”，基本上意味着内容已被替换，因此其行为类似于inline-block元素。是的，是实际的默认属性（通过浏览器计算的属性是内联）。但是，这样做的唯一原因是因为inline-block直到CSS2才被引入，因此存在一个“ inline元素的行为类似于inline-block元素”，因为它已被其内容替换。也就是说，您没有为元素设置高度/宽度，而是在元素的内容上进行了设置-Wierd，是的。我知道。 drafts.csswg.org/css2/conform.html#replaced-element

— Alex

这实际上很有趣。给我一些时间进行研究和重新编辑，然后取回向下投票和向上投票..！归根结底，我已经诚实地感觉到，这种讨论正在促进整个辩论的完成。

— alexandros84

1

splattne的答案可能涵盖了大多数内容，因此我不会重复同样的事情，而是：inline和CSS属性的inline-block行为有所不同direction。

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

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

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

span {
  display: inline;
}

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

展开摘要

但是，如果我继续设置display为inline-block，则浏览器似乎会尊重该direction属性，并按从右到左的顺序依次渲染元素，从而two one渲染出来。

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

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

span {
  display: inline-block;
}

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

展开摘要

我不知道是否还有其他怪癖，我只是在Chrome上凭经验发现了这一点。

— 过度编码器
source

display：inline和display：inline-block有什么区别？

视觉答案