CSS inline和inline-blockCSS 的区别究竟是什么display?
回答中没有提到的一件事是内联元素可以在行之间中断,而内联块不能(明显阻塞)!所以内联元素可以用来设置内部文本和块的样式,但是由于它们不能被填充,所以可以使用行高。
<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>
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;默认,因为这既不是一句也不在一个句子,这是句块。
一个元素display: inline; 不能有一个height或一个width或一个垂直margin。一个元素display: block; 可以有一个width,height和margin。
如果您想将添加height到<em>元素,你需要设置这个元素display: inline-block;。现在你可以添加一个height元素和其他所有的块样式(的block部分inline-block),但它被放置在一个句子(的inline部分inline-block)。