What does it mean to display inline vs inline-blocks?


While looking at the examples below it is best to keep in mind that an inline-block element is placed as an inline element (on the
same line as adjacent content), but it behaves as a block element.

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.
Inline Div1
Inline Div2
Inline Div3
Inline Div4
Inline Div5
Inline Div6


Inline Div7

Inline Div8

Doesn't respect padding-top, padding-bottom, width and height

.inline-div {
border: solid 1px blue;
display:inline;
padding-top: 3px;
padding-bottom: 3px;
width: 110px;
height: 30px;
}

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 Div1
Inline Block Div2
Inline Block Div3
Inline Block Div4
Inline Block Div5
Inline Block Div6


Inline Block Div7

Inline Block Div8

Respects padding-top, padding-bottom, width and height

.inline-block-div {
border: solid 1px blue;
display:inline;
padding-top: 3px;
padding-bottom: 3px;
width: 110px;
height: 30px;
}