Display Inline vs. Display Inline-Block

Every element on a website (i.e. a paragraph, heading, list, etc) is either displayed on a new line (block element) or on the same line as other elements (inline element). A developer must be aware of which of these displays an object will take so that they can ensure that elements appear where they would like them to. Floating and positioning are terms for processes that involve placing elements in a certain way, but using display:inline-block is another way to control where an element appears.

Inline elements:

Allow other elements next to them. Respect left and right margins and padding, but will ignore top and bottom margins and padding and will ignore width and height settings.

** Examples: a, span, em, i

Block elements:

Take up the entire line; thus, block elements create a line break and are surrounded by whitespace. Allow for margins and padding on all four sides. If no width is set, will expand to fill its parent container (the element that it is placed inside of). If no height is set, it will expand to fit its child elements (elements that are placed within the block element) if they are not floated or positioned.

** Examples: p, div, header, nav, ul, li, h1

Inline-block elements:

Behave like a hybrid of inline and block elements because: Place an element on the same line as adjacent content (like an inline element) Create a rectangular region (block) because it respects margins and padding on all four sides and can have height and width set (like a block element)

Pop quiz… Is the above photo an example of an inline, block, or in-line block element? Answer: it is an inline element since other inline elements would show up right next to it!

Floating vs Inline-Block?

Both floating and using inline-block let you create a grid of boxes that fill the browser width. But inline-block lets you create the same effect without having to clear the float.