CSS - Display

Ethan D. - May 31, 2024

Display Property Values

block

Block-level elements have these characteristics:

They start on a new line and take up the full width available by default.
They have a top and bottom margin, and you can set their width and height.
Examples of block-level elements include <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, and <section>.

Example: Block-level behavior

<div>This is a block-level element.</div>
<p>This is another block-level element.</p>

In the above example, the <div> and <p> elements will start on new lines and occupy the full width of their parent container.

inline

Inline elements have these characteristics:

They do not start on a new line and only take up as much width as needed.
They do not have a top or bottom margin, and you cannot set their width or height.
Examples of inline elements include <span>, <a>, <strong>, <em>, and <img>.

Example: Inline behavior

<span>This is an inline element.</span>
<a href="#">This is another inline element.</a>

In the above example, the <span> and <a> elements will stay on the same line and only take up necessary space.

inline-block

Inline-block elements have these characteristics:

They are similar to inline elements but can have a width or height.
They do not start on a new line but can sit next to other items.
Examples of inline-block items include <button>, <input>, and <select>.

Example: Inline-block items

<button>This is an inline-block item</button>
<input type="text" value="Another one">

In this case, both items stay in one row but can be sized differently.

none

The display: none property value has these effects:

It removes an item from view so it won't show up at all.
The item won't use any space in your layout.
This differs from visibility: hidden; which hides it but still uses space.

Example: Display: none and Visibility: hidden

<div style="display:none;">You can't see me</div>
<div style="visibility:hidden;">I'm hidden but still here</div>

In this case, you won’t see anything for display:none while visibility:hidden keeps its spot even though it's invisible.

Changing Display Properties

You can change the display property of any element using CSS. This lets you modify the default behavior of elements and create custom layouts. Here are some examples of modifying display properties and combining them with other CSS properties:

Example: Changing Display Property

<style>
  span {
    display: block;
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>

<span>This is now a block-level element.</span>
<span>This is another block-level element.</span>

In the above example, we changed the display property of the <span> elements to block. This makes them behave like block-level elements, starting on new lines and allowing us to set their width, height, padding, and margin.

You can also change the display property of block-level elements to inline or inline-block:

Example: Changing Block-Level Elements to Inline or Inline-Block

<style>
  li {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 10px;
    margin-right: 10px;
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Here, we changed the display property of the <li> elements to inline-block, allowing them to sit next to each other while still being able to set their width, height, padding, and margin.

You can combine display properties with other CSS properties for visually appealing designs:

Example: Combining Display Properties with Other CSS Properties

<style>
 .card {
   display: inline-block;
   width: 200px;
   background-color: #fff;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   padding: 20px;
   margin: 10px;
   text-align: center;
   transition: transform 0.3s ease;
 }

 .card:hover {
   transform: translateY(-5px);
 }
</style>

<div class="card">
  <h3>Card1</h3>
  <p>Some content goes here.</p>
</div>

<div class="card">
  <h3>Card2</h3>
  <p>Some content goes here.</p>
</div>

In this example, we created a simple card component using inline-block combined with other CSS properties like width, background-color, box-shadow, padding, margin, text-align, and transition. This creates an attractive design that responds to user actions like hovering.

Responsive Design and Display

The display property is important in responsive web design. It helps you create layouts that adapt to different screen sizes and devices. By combining the display property with media queries, you can change the layout and behavior of elements based on the viewport width or other device characteristics.

Media queries allow you to apply different CSS styles based on the screen size or other device properties. You can use media queries to change the display property of elements at specific breakpoints, creating responsive layouts that adjust to different devices.

Example: Responsive Layout with Display Property

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    flex: 1 1 300px;
    background-color: #f0f0f0;
    padding: 20px;
    margin: 10px;
  }

  @media screen and (max-width: 768px) {
    .item {
      display: block;
      width: 100%;
    }
  }
</style>

<div class="container">
  <div class="item">
    <h3>Item 1</h3>
    <p>Content goes here.</p>
   </div>
   <div class="item">
     <h3>Item 2</h3>
     <p>Content goes here.</p>
   </div>
   <div class="item">
     <h3>Item 3</h3>
     <p>Content goes here.</p>
   </div>
</div>

In this example, we have a container with three items inside. By default, the items are displayed using Flexbox (display: flex), allowing them to sit next to each other and have equal width. The flex-wrap property allows the items to wrap if there's not enough space.

We also have a media query that targets screens with a maximum width of 768px. Inside this query, we change the display property of the items to block and set their width to 100%. This makes them stack on top of each other and take up full width on smaller screens.

Example: Showing/Hiding Elements Based On Screen Size

<style>
  .desktop-only {
    display: block;
  }

  .mobile-only {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .desktop-only {
      display: none;
    }

    .mobile-only {
      display: block;
    }
  }
</style>

<div class="desktop-only">
  <p>This content is only visible on desktop screens.</p>
</div>

<div class="mobile-only">
  <p>This content is only visible on mobile screens.</p>
</div>

In this example, we have two elements: one with a class desktop-only and another one with a class mobile-only. By default, the desktop-only element is displayed (display: block) while mobile-only element is hidden (display: none). Inside a media query targeting screens with a max-width of 768px, we switch these properties. The desktop-only element will be hidden while mobile-only will be shown. This allows showing different content/layouts depending on the user’s device, providing a better experience across platforms.

Flexbox and Grid

CSS Flexbox and Grid are two layout systems that work with the display property to create responsive designs.

Flexbox is a one-dimensional layout system that helps you distribute space and align content in a container, even if you don't know the size of the items. It works well for smaller layouts and components like navigation menus, cards, or forms. To use Flexbox, you set the display property of a parent element to flex or inline-flex, and then control how its children behave using properties like flex-direction, justify-content, and align-items.

Example: Flexbox Layout

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 20px;
  }

  .flex-item {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    flex-basis: 30%;
  }
</style>

<div class="flex-container">
  <div class="flex-item">
    <h3>Item 1</h3>
    <p>Content goes here.</p>
  </div>
  <div class="flex-item">
    <h3>Item 2</h3>
    <p>Content goes here.</p>
  </div>
  <div class="flex-item">
    <h3>Item 3</h3>
    <p>Content goes here.</p>
  </div>
</div>

Grid is a two-dimensional layout system that lets you create complex responsive designs with rows and columns. It's great for larger layouts like full-page designs or complex components. To use Grid, you set the display property of a parent element to grid or inline-grid, then define rows and columns using properties like grid-template-rows, grid-template-columns, and grid-gap.

Example: Simple Grid Layout

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  background-color: #f0f0f0;
  padding: 20px;
}

.grid-item {
  background-color: #fff;
  padding: 20px;
  text-align: center;
}
</style>

<div class="grid-container">
  <div class="grid-item">
    <h3>Item 1</h3>
    <p>Content goes here.</p>
  </div>
  <div class="grid-item">
    <h3>Item 2</h3>
    <p>Content goes here.</p>
  </div>
  <div class="grid-item">
    <h3>Item 3</h3>
    <p>Content goes here.</p>
  </div>
</div>

Both Flexbox and Grid use the display property to create their respective contexts. When you set display: flex or display: grid on a parent element, it creates a new context for its children, allowing you to control their layout using Flex or Grid properties.

Learning Flex and Grid is important for creating modern responsive web layouts. They provide more control and flexibility than traditional layout methods like floats and positions, making it easier to build complex designs that adapt to different screen sizes and devices.