首页 文章

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

提问于
浏览 次
538

CSS display 的 inline 和 inline-block 值之间究竟有什么区别？

css display

4 回答

  • 125

    display: inline; 是在句子中使用的显示模式 . 例如，如果您有一个段落并想要突出显示单个单词：

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

    <em> 元素默认具有 display: inline; ，因为此标记始终用于句子中 . <p> 元素默认具有 display: block; ，因为's neither a sentence nor in a sentence, it'是一个句子块 .

    具有 display: inline; 的元素不能具有 height 或 width 或垂直 margin . display: block; 元素可以包含 width ， height 和 margin .
    如果要将 height 添加到 <em> 元素，则需要将此元素设置为 display: inline-block; . 现在，您可以向元素和每个其他块样式（ inline-block 的 block 部分）添加 height ，但它会放在一个句子中（ inline inline-block 的一部分） .

    回复于
  • 1237

    以上所有答案都对原始问题提供了重要信息 .

    然而，有一种看似错误的概括 .

    It is possible 将宽度和高度设置为至少一个（我能想到）内联元素 .

    这两个人都接受了答案并在this duplicate上声明这是不可能的，但这似乎不是一个有效的一般规则 .

    例？

    <img src="#" />

img {
  width: 200px;
  height: 200px;
  border= 1px solid red;
}
    回复于
  • 2

    答案中没有提到的一点是内联元素可以在行间断开，而内联块可以填充，你可以使用 line-height 代替 .

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

    enter image description here

    回复于
  • 7

    视觉答案

    想象一下 <div> 中的 <span> 元素 . 例如，如果为 <span> 元素指定高度为100px和红色边框，则它将如下所示

    display: inline

    display: inline

    display: inline-block

    display: inline-block

    display: block

    enter image description here

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

    display:inline-block 元素与 display:inline 元素类似，但它们可以有 width 和 height . 这意味着您可以在文本或其他元素中使用内联块元素作为块 .

    支持的样式与摘要的区别：

    • inline ：仅 margin-left ， margin-right ， padding-left ， padding-right

    • inline-block ： margin ， padding ， height ， width

    回复于

相关问题