Difference between Display inline, inline-block, block

  1. The default value for elements.
  2. Takes left & right margins and padding, but not top & bottom
  3. An inline element will accept margin and padding, but the element still sits inline. Margin and padding will only push other elements horizontally away, not vertically.
  4. cannot have a width and height set
  5. An inline element will not accept height and width. It will just ignore it.

inlinepadding

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

inline-block.png

Block elements:

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

block

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s