css: display

Cover Image for css: display

A few weeks back, I create a new twitter profile with the goal to interact a bit more with developers around. One of the accounts I followed early on was Pratham (twitter / pratham.codes) - I really recommend to give him a follow too, if you haven't yet. There's some amazing (and handwritten!) css cheatsheets, suggestions on what to learn to get into webdevelopment and also links to resources on how to build modern websites.

The latest visualized cheatsheet about a css property was about the most common values of the display property: block, inline and inline-block. Personally, I am a bit confused with html elements would be displayed in what way, (Often I have just decided to use flexbox around the elements, instead of actually understanding the positioning of the elements) so I decided to take a deeper look at it to have a better understanding of it.

Values

HTML elements are always rendered as boxes, with display we can define, how that box will be rendered on an website. Since CSS 2.1 and CSS3 (including flex and flex-frid) a LOT of values have been added as possible values for the display property. I will not cover all options in this blog post, but there an overview:

// Basic
display: none;
display: inline;
display: block;
display: list-item;

// CSS 2.1 Extended values
display: inline-block;

// CSS 2.1 Table model values
display: inline-table;
display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;

// CSS3 flexbox and gridbox
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;

// Experimental
display: contents;

display: run-in;


// CSS3 Ruby
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

display: none

With display: none, the display of a certain html element (and all the descendent elements) can be disabled - it would be rendered as if it wouldn't exist.

If there's the need to render the element with the orginal space, but just not visible a combination of visibility or opacity can be used. With those two options you can also add transition animation with css, which is not possible when you toggle the visibility with display.

display: block

With display: block attribute on HTML elements, linebreaks will be added before and after the element, with the result that only one element will be rendered per "line". So for example if we got something like this in our css:

.block { 
  display: block; 
  text-align: center; 
  height: 5em; 
  border: 10px solid #003679; 
  margin-bottom: 1em; 
  padding: 1em; 
  border-radius: 20px; 
  width: 30%; 
}

And something like this in our HTML

<div class="block">
   I am 30% width and display: block
</div>
<div class="block">
   I am 30% width and display: block
</div>

As we can see in the sample above the width of a block-element doesn't help us to align them just next to each other. To achieve that, we'd need to set the display to inline-blox or juse a flexbox container around those divs to align them.

What about default values? Some HTML elements use block as default values and some have inline as default. The following are block elements:

  • Headers (h1 - h2)
  • div
  • p
  • form
  • header, footer, section

display: inline

As learned before, block elements would have linebreaks before and after the box-element - with inline that linebreaks would be removed. We kinda could say those two values would be the opposite.

Another character of inline-elements is that height and width properties on those elements would be ignored

Examples for inline elements are:

  • span, em
  • a
  • img

display: inline-block

Why would we need another one? Well, how about you would like to have a few divs next to each other, but you would still like to add the height and width attributes. Well, that's why on CSS2.1 inline-block was introduced.

inline-block elements are rendered like inline elements (without linebreaks), but you can add more attribute to define the size of the respective box

The Rest

Besides the four classic properties I have described below there also the following ways to display your HTML elements:

  • Flexbox model: The flexbox model offers a way to distribute your html boxes horizontally or vertically (and I is a good way to distribute the space nicely).
  • Gridbox model: While flexbox was originally used to align items in one dimension only - either a row or column (althought you could combine them, when using nested flexbox containers), gridbox was designed to for a two-dimensional layout. Despite that the two systems got some similarities.
  • Table model: You can't live without tables and want to style your divs like one? The table attributes got you covered. For example display: table makes your div render like a <table>, similar goes for table-cell, table-column