Display

Block - inline - none

• HTML knows only two display types: block elements and inline elements
• With CSS the (default) display type can be changed to more than 20 other types
• In this section, we only discuss the four most frequently used display types (block, ìnline inline-block and none)
• A fifth frequently used display type (flex) will be discussed in detail on the Flexbox page

value	example element	width	height	padding	margin
block	<div>, <p>, <h1>, <h2>, ..., <h6>, <hr>, ...	yes	yes	yes	yes
inline	<span>, <a>, <strong>, <img> *, ...	no *	no *	yes +	yes +
inline-block		yes	yes	yes	yes
none		no	no	no	no

* <img>

The image tag behaves somewhat different than most of the inline elements: while an inline element can't have a value for width and height, the img tag can!

+ padding and margin on inline elements

• padding and margin of inline elements only generate horizontal distance;
  vertically inline elements overlap with the existing content
• Again, the img element, for which vertical distance is generated with padding and margin, is the exception
• Change inline elements to inline-block to get the same effect (also vertical padding and margin) as for images

EMMET instruction	result
d + TAB	display:block;
d:b + TAB	display:block;
d:i + TAB	display:inline;
d:ib + TAB	display:inline-block;
d:n + TAB	display:none;

Example 1

• The example below contains a number of block elements and inline elements
  • Block elements are visualised with     an orange outline
  • Inline elements are visualised with     a green outline

Use cases

display: block

• Change the display of an inline element to a block element
• Return to the default value after display: none;

display: inline

• Change the display of an block element to a inline element
• Return to the default value after display: none;

display: none

• Hide an element on different breakpoints or on media="print"

Example 2

• The most important elements in this example are:
  • the navigation nav which consists of some a tags (inline elements) next to each other
  • the footer footer (block element)

Small screen (below 600px)

• On a small screen, the links appear beneath each other
  (All a tags are converted to block elements)
• The footer will only appear on the printed version
  (The footer tag is hidden)

a {
  color: whitesmoke;
  background-color: #638c99;
  border: 1px solid #638c99;
  font-weight: bold;
  text-decoration: none;
  display: block;
  padding: 0.5rem 1rem;
  margin: 0;
}

footer {
  border-top: solid 1px black;
  text-align: right;
  display: none;
}

Larger screen (above 600px)

• On a larger screen, the links will appear next to each other
  (All a tags are converted back to inline elements)

a {
  display: inline;
}

For print

• Hide the navigation
• Show the footer

nav {
  display: none;
}

footer {
  display: block;
}

Example 3

• The most important tag in this example is the h2 tag

<h2 class="hideOnPrint">
    This is a
    <span class="showOnSmall">small</span>
    <span class="showOnMedium">medium</span>
    <span class="showOnLarge">large</span> 
    screen
</h2>

	small.css	medium.css	large.css
.showOnSmall		display: none;
.showOnMedium	display: none;	display: inline;	display: none;
.showOnLarge	display: none;		display: inline;

Small screen (below 600px)

• The showOnMedium and showOnLarge classes set the display of the corresponding span elements to none -> the word 'small' is shown in the h2 element

.showOnMedium,
.showOnLarge {
    display: none;
}

Medium screen (between 600px and 800px)

• The showOnSmall class sets the display of the corresponding span element to none; the showOnMedium class sets/overrides the display of the corresponding span element to inline -> the word 'medium' is shown in the h2 element

.showOnSmall {
    display: none;
}

.showOnMedium {
    display: inline;
}

Large screen (above 800px)

• The showOnMedium class sets/overrides the display of the corresponding span elements to none; the showOnLarge class sets the display of the corresponding span element to inline -> the word 'large' is shown in the h2 element

.showOnMedium {
    display: none;
}

.showOnLarge {
   display: inline;
}

For print

• The hideOnPrint class sets the display of the h2 element to none -> the h2 element is not shown

.hideOnPrint {
    display: none;
}

Visibility

• There are two ways to hide elements from the DOM:
  • With the style rule display: none: the content is not visible and the original spot collapses
    (applied to the second paragraph in the example below)

    p.paragraph2 {
        display: none;
    }

  • With the style rule visibility: hidden: the content is not visible, but leaves a gap!
    (applied to the fourth paragraph in the example below)

     p.paragraph4 {
          visibility: hidden;
     }

Example

Inline block

• inline-block is mostly used to change an inline element so that the padding and margings can be fully used (i.e. not only for horizontal distance, but also for vertical spacing above and below the element)

Example 1: banner

• Open this pen in a separate window

Bargains label

p.friday {
    font-size: 30px;
    text-align: center;
}

p.friday span {
    background-color: firebrick;
    color: white;
    width: 100px;
    height: 100px;
    padding: 1rem;
    margin: 1rem;
}

• bargains is a default span tag
  • The width and height are set on (the span in) p.friday, but this has NO effect on an inline element!
  • The padding and margin are also set on (the span in) p.friday, but this has only effect in a horizontal direction

• Change the padding temporarily to 4rem and see what happens (in the vertical direction)

Sales label

p.friday span#sales {
    display: inline-block;
}

• The span tag is transformed into inline-block
• Both width , height and margin are visible in the vertical direction

• Change the padding temporarily to 4rem, no overlap this time

Deals label

p.friday span#deals {
    display: inline-block;
    line-height: 100px;
}

• Set the line-height equal to the height of the box to center the text within the box

Example 2: right align figcaption

• As confirmed in the example below, figure and figcaption are block elements
• The image is an inline element
• If you align the figcaption to the right, it will not appear under the image but on the far right of the screen

• You can easily fix this by changing the value of the display property of the figure tag to inline-block

figure {
    display: inline-block;
    outline: 2px solid rgba(106, 212, 250, 0.61);
}

Example 3: from link to button

• As you already know, links (a) are inline elements
• To change the layout of a link to a button (with paddings and/or margins), we need to switch its display to inline-block
• The other properties are for decorative purposes only

a {
    display: inline-block;
    padding: .75rem 2rem;
    text-decoration: none;
    font-weight: bold;
    color: #295fc2;
    background-color: #8cc115;
    border: .25rem solid #8cc115;
}