CSS display: inline vs inline-block [duplicate]

CSS display: inline vs inline-block [duplicate]

In CSS, display can have values of inline and inline-block. Can anyone explain in detail the difference between inline and inline-block?

I searched everywhere, the most detailed explanation tells me inline-block is placed as inline, but behaves like block. But it does not explain what exactly "behave as a block" means. Is it any special feature?

An example would be an even better answer. Thanks.

回答1

Inline elements:

1. respect left & right margins and padding, but not top & bottom
2. cannot have a width and height set
3. allow other elements to sit to their left and right.
4. see very important side notes on this here.

Block elements:

1. respect all of those
2. force a line break after the block element
3. acquires full-width if width not defined

Inline-block elements:

1. allow other elements to sit to their left and right
2. respect top & bottom margins and padding
3. respect height and width

From W3Schools:

• An inline element has no line break before or after it, and it tolerates HTML elements next to it.

• A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.

• An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

When you visualize this, it looks like this:

 The image is taken from this page, which also talks some more about this subject.

I think you did not read my question completely. I mentioned in the question I know it behaves as a block element. I am asking what does "behave as a block element" means. – user926958 Feb 8 '12 at 8:57

I know it's old, but I'll help: "Behaves like a block element" is insanely poor wording. I'll try to clarify further: inline: can display things before or after it, on the same line. block: demands its own line, with whitespace around it. inline-block: can have elements before or after it, but there is whitespace around it. So inline-block is not "inline but behaves like block," it's a combination of both, as the name would imply: on the same line, but has borders. Make sense? – vbullinger Sep 24 '13 at 15:42

 

One important distinction to note is that an inline element can start on one line and wrap onto the following line, while an inline-block element will wrap as a whole. – herman Jun 24 '14 at 15:18

 

 

 

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

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

回答1

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/

自己也fork了一个版本 http://jsfiddle.net/ud25tGNwMddCP7JI/hLnaevyf/1/

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