CSS Display

❮ Prev Next ❯

The display property, which allows developers to control how elements are rendered in the browser window. Understanding and mastering the display property is essential for creating well-structured and visually appealing layouts

The display property of an object determines how it is rendered by the browser.

It's a very important property, and probably the one with the highest number of values you can use.

Those values include:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

plus others you will not likely use, like ruby.

Choosing any of those will considerably alter the behavior of the browser with the element and its children.

In this section we'll analyze the most important ones not covered elsewhere:

  • block
  • inline
  • inline-block
  • none
  • flex
  • grid

We'll see some of the others in later chapters,

inline

Inline is the default display value for every element in CSS.

All the HTML tags are displayed inline out of the box except some elements like <div>, <p>and <section>, which are set as block by the user agent (the browser).

Inline elements don't have any margin or padding applied.

Same for height and width.

You can add them, but the appearance in the page won't change - they are calculated and applied automatically by the browser.

Example: 

.inline {
  display :inline;
}

inline-block

Similar to inline, but with inline-block, widthand heightare applied as you specified.

block

As mentioned, normally elements are displayed inline, with the exception of some elements, including

  • div
  • p
  • section
  • ul

which are set as blockby the browser.

With display: block;elements are stacked one after each other, vertically, and every element takes up 100% of the page.

The values assigned to the widthand heightproperties are respected, if you set them, along with marginand padding.

Example: 


.inline-block {
  display :inline-block;
} 

.block {
  display :block;
}

none

Using display: none;makes an element disappear. It's still there in the HTML, but just not visible in the browser.

Example: 

.hidden {
  display :none;
}

flex

The display: flex;property value enables a flex container, allowing flexible layouts to be created with its child elements. Flexbox is a powerful layout model that provides precise control over the alignment, distribution, and order of elements within a container.

Example: 

.container {
  display :flex;/* Create a flex container */
  justify-content :space-between;/* Distribute items evenly */
}

Example: 

.container {
  display :grid;/* Create a grid container */
  grid-template-columns :1fr 1fr 1fr;/* Create three equal-width columns */
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      .container{
        display :flex;
        justify-content :space-between;
      } 

      .inline{
        display :inline;
      } 

      .hidden{
        display :none;
      } 
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <h3>welcome to Coding Koleji </h3>
      <ul class="container">
      <li>This is the first item on the list.</li>
      <li>This is the second item on the list.</li>
      <li>This is the third item on the list.</li>
    </ul>
    <ol class="inline">
      <li>This is the first item on the list.</li>
      <li>This is the second item on the list.</li>
      <li>This is the third item on the list.</li>
      </ol>
      <p class="hidden">This paragraph will be hidden </p>
    </body>
  </html>

mastering the displayproperty in CSS is crucial for controlling the layout and presentation of elements on a webpage.

By understanding the different values of the display property and how they affect the rendering of elements, developers can create responsive, visually appealing layouts that enhance the user experience.

Keep experimenting with different display values and layout techniques to discover the most effective solutions for your specific design requirements.

❮ Prev Next ❯