All HTML elements are rectangular boxes rendered in the browser viewport. The HTML flow is linear and runs vertically from top to bottom. HTML element has a display property value by default. The display property stipulates how an element’s box behaves. The two most common values for display are block and inline.
.myclass {
display: block /*elements stack on top of each other like paragraphs on a page*/
Display: inline /*elements run together like words in a sentence*/
}Block
Container elements like <div>, <header>, <main> and <section> are block-level elements. Most typographic elements are also block-level elements. That means they stack on top of each other, like paragraphs in a text. They also take up 100% of the available width. Block elements accept margin and padding values.
Inline
Inline elements don’t break the flow of the text. Elements like <a>, <span> and <em> run on from each other in a string. Inline elements do accept margins and padding but it doesn’t work as you’d expect. Margins and padding don’t move elements away vertically. Padding will overlay other elements and margin-top and margin-bottom doesn’t seem to work. Margin and padding work horizontally, however. Also, inline elements don’t accept height and width values.
Inline-block
The best of both worlds. If you set an element’s display property yo inline-block is will set sit on the baseline and run inline, but it will accept top and bottom margins and also height and width values.
The video below is a walkthrough of the display property values: block, inline, inline-block, and none. Follow along with your own CodePen.
The inline-block property value has layout possibilities. Below I build a grid that responds to viewport width. Inline-block would also be good for making horizontal menu elements.
Here is the finished CodePen:
