Are you inline or block?

January 20, 2023 - Reading time: 5 minutes

Again, this article has to do with understanding default display value before attempting changes. An HTML element could be either inline or block.

Inline element

  • Takes up content's width
  • Cannot contain a block element

Most used inline elements: a, img, br, span, input, label

Often used inline elements: button, code, em, strong, textarea, select

Block element

  • Starts on a new line and takes up full width of their parent element
  • Browser adds default margin

Most used block elements:

  • semantical structure (header, nav, main, section, article, p, aside, footer) + div
  • table (table, tfoot)
  • lists (ul, li, ol)
  • form (form, fieldset)
  • heading (h1 to h6)

Change default display

Diplay can be decomposed in two directions: outer (element's participation in flow layout) and inner (sets layout of children).

Use display property and set it to block or inline - this defines outer direction

Depending on your intent, you may also want to consider using flex value to manage the inner direction

Note that you can use precomposed values containing both outer and then inner instructions such as inline-flex or inline-block.

Zoom on inline-block

Using inline-block you can transform a block element into an inline element, with a width set. Just remember that your two elements must be on the same line to fit into a 100% width. Use a wrapper to set space between elements. Full demo can be found on CodePen. In the following example, p elements will be displayed side by side.


p { 
display: inline-block;
width: 50%;


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec neque ut dolor vehicula malesuada.</p><p>Aliquam ornare, orci elementum gravida congue, augue eros congue diam, nec vehicula velit velit non 
orci. In eget sem nunc. Nulla facilisi.</p>