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

问题描述

inline 和 inline-block CSS 显示？

解决方案

视觉回答

想象一个< div> 中的< span> 如果您给予< span> 元素的高度为100像素和红色边框，例如，它将如下所示：

display：inline

$ b

display：inline-block

显示：block

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

具有 display：inline-block 的元素类似于 inline 元素，但它们可以具有宽度和高度。这意味着你可以使用一个inline-block元素作为一个块，同时在文本或其他元素内流动。

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.

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