CSS - inline vs. inline-block vs. block
![[css3.svg]](/images/logo/css3.svg){kind=logo}
CSS - inline vs. inline-block vs. block A visual guide
Lines run horizontally.
Blocks stack vertically.
Inline
Counting to 10 in German:
One - Eins
Two - Zwei
Three - Drei
Four - Vier
Five - Fünf
Six - Sechs
Seven - Sieben
Eight - Acht
Nine - Neun
Ten - Zehn
Generates an inline box. Content is arranged in lines, and will flow with surrounding inline elements.
span This is a single inline element. span
Ignores CSS width and height.
Ignores CSS top / bottom margins and padding.
Width and height are determined by content.
Inline-block
Counting to 10 in German:
One - Eins
Two - Zwei
Three - Drei
Four - Vier
Five - Fünf
Six - Sechs
Seven - Sieben
Eight - Acht
Nine - Neun
Ten - Zehn
Generates an inline-level block container. Content is arranged in lines, but can have the characteristics of a block box.
Container will expand to the full width of the parent before generating a line-break.
span This is a single inline-block element. span
Block
Counting to 10 in German:
One - Eins
Two - Zwei
Three - Drei
Four - Vier
Five - Fünf
Six - Sechs
Seven - Sieben
Eight - Acht
Nine - Neun
Ten - Zehn
Generates a block box. Content is stacked.
Fills the entire width of its parent element.
Creates a line-break before and after the element.
span
div
span