What is the difference between display: inline and display: inline-block?

Question

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

Answer 1

A visual answer

Imagine a element inside a

. If you give the 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

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...