display: inline 和 display: inline-block 有什么区别? [英] What is the difference between display: inline and display: inline-block?

问题描述

CSS display 的 inline 和 inline-block 值到底有什么区别?

解决方案

直观的答案

想象一下

中的 元素.例如，如果你给 <span> 元素一个 100px 的高度和一个红色边框，它看起来像这样，

显示:内嵌

显示:内联块

显示:阻止

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

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

支持的样式差异总结:

• inline:仅margin-left、margin-right、padding-left、padding-对
• inline-block:margin、padding、height、width

What exactly is the difference between the inline and inline-block values of CSS display?

解决方案

A visual answer

Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with

display: inline

display: inline-block

display: block

Code: http://jsfiddle.net/Mta2b/

Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.

Difference of supported styles as summary:

• inline: only margin-left, margin-right, padding-left, padding-right
• inline-block: margin, padding, height, width

这篇关于display: inline 和 display: inline-block 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！