8

Can someone explain the difference between 'block' and 'inline-block' for the CSS display setting?

1
  • If you think about how an image appears in a line of text, you'll get the idea of making an inline-block element.
    – animuson
    Feb 10, 2012 at 0:52

3 Answers 3

15

Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc. For example:

Inline-block demo

(Source: http://www.impressivewebs.com/inline-block/)

5

inline-block treats the element like other inline elements but allows the use of block properties.

Elements with display: block take up as much width as they are allowed and typically start on a new line.

1
  • 1
    Ah, good to know about the 'new line' aspect. inline-block is indeed quite nifty.
    – Nubtacular
    Apr 9, 2014 at 21:39
0

This is a wonderful detailed article about this topic: What’s the Deal With Display: Inline-Block?

2
  • Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.
    – kleopatra
    Feb 8, 2014 at 15:41
  • @kleopatra thanks for the note, and I will take that into consideration next time.
    – Amr
    Feb 8, 2014 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.