# 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

# 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 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;
    }
  

  1
  2
  3
  
  • 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;
     }
  

  1
  2
  3
  

# 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;
}