1. Home
Software key Topics

A Comprehensive Guide on Software Key Tutorials

Elevate your software skills with our comprehensive tutorials covering concepts from basic to advanced techniques. Dive in and become a software pro!

  • 220 Lessons
  • 37 Hours
right-top-arrow

Tutorial Playlist

218 Lessons
81. 

Display Property in CSS

Updated on 19/07/20241,814 Views
Content

Introduction

The display property in CSS serves as a critical tool in web development, providing an unparalleled level of control over the layout and behavior of HTML elements on a webpage. In this tutorial, we'll delve into the core of this property, enhancing your understanding and practical application of CSS.

Overview

This tutorial provides a comprehensive examination of the display property in CSS. We'll delve into its theoretical understanding, practical usage, how to use display property in CSS, and the role it plays in the broader context of web design.

What is CSS Display?

In CSS (Cascading Style Sheets), the display property is used to control how an HTML element is rendered or displayed on a web page. It specifies the type of box used for an HTML element and how it interacts with other elements in the document flow.

Here is an example:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>The display Property Of CSS</h1>

<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO upGrad!</p> 
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO upGrad!</p> 
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO upGrad!</p> 
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO upGrad!</p> 
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

</body>
</html>

What is the Display Property in CSS?

The CSS display property defines the display type of an element, thus influencing its layout behavior in the HTML structure. It regulates how an element fits into the overall document flow, as well as its relationship with neighboring elements.

Every HTML element has a default display value, depending on what type of element it is. For instance, the default display value of a 'div' is 'block,' while that of a 'span' is 'inline.' Moreover, setting the display value to 'none' makes the element and its content disappear from the page.

More complex display properties include 'flex' and 'grid,' which allow for intricate, responsive layouts. For instance, the 'display: flex' in CSS makes the element a flexible container, enabling children to adjust their width and height to best fill available space. Similarly, 'display: grid' creates a grid container, in which children can be positioned across rows and columns.

How Does Display Property in CSS Work?

The display property in CSS is a fundamental and powerful property that determines how an HTML element will be displayed on a web page. It essentially controls the layout model for the element, defining its type of box and how it interacts with other elements around it. The display property influences how an element occupies space, flows in the document flow, and interacts with other elements in the document.

Let's dive into the key aspects of how the display property works:

  • Box Model:
    • display: block: Elements with this value generate a block-level box. Block-level elements start on a new line and occupy the full available width of their parent container. They stack vertically on top of each other by default. Common examples of block-level elements are <div>, <p>, and <h1> to <h6>.
    • display: inline: Elements with this value generate an inline-level box. Inline-level elements only take up as much width as necessary to fit their content, and they do not force line breaks. They flow alongside other inline-level elements. Common examples of inline-level elements are <span>, <a>, and <img>.
  • Combining Block and Inline:
    • display: inline-block: This value combines aspects of both block and inline. Elements with this value generate an inline-level box, but they can have a width and height set, just like block-level elements. This allows you to have elements with block-level features (like width and height control) within a line of text. Common examples of using inline-block are for creating buttons and placing images side by side with text.
  • Controlling Visibility:
    • display: none: This value makes the element effectively invisible. It does not occupy space in the layout, and its contents are not rendered. It's often used for hiding elements dynamically with JavaScript or for creating CSS-only toggles for visibility.
  • Flexible Layouts:
    • display: flex: This value establishes a flex container. It enables a flexible layout model for its direct children, allowing you to distribute space dynamically among the children items. Flexbox is a powerful layout system for creating one-dimensional layouts along a single axis (either horizontally or vertically).
  • Grid Layout:
    • display: grid: This value establishes a grid container. It enables a grid layout model for its direct children, turning them into grid items. Grid layout allows you to create complex two-dimensional layouts by defining rows and columns and placing elements within the defined grid cells.

The display property can be set on an element either using inline styles or by defining a CSS rule in a <style> block or an external CSS file. You can target specific elements or use classes and IDs to apply the desired display value to multiple elements.

Example:

Code:

<!DOCTYPE html>
<html>
<head>
  <title>Display Property Example</title>
</head>
<body>
  <div class="block-example" style="display: block; background-color: lightblue; padding: 10px;">This is a block-level element.</div>
  <span class="inline-example" style="display: inline; background-color: lightgreen; padding: 5px;">This is an inline-level element.</span>
  <div class="inline-block-example" style="display: inline-block; background-color: lightcoral; padding: 8px;">This is an inline-block element.</div>
  <div class="none-example" style="display: none;">This element has display: none and won't be visible.</div>
  <div class="flex-example" style="display: flex; background-color: lightyellow; padding: 10px; justify-content: space-between;">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
  </div>
  <div class="grid-example" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background-color: lightgray; padding: 10px;">
    <div>Grid Item 1</div>
    <div>Grid Item 2</div>
    <div>Grid Item 3</div>
  </div>
</body>
</html>

Why is Display CSS Important?

Understanding and effectively utilizing the display CSS property is crucial to mastering web design. It plays a pivotal role in creating responsive designs, an essential skill in today's mobile-first web landscape.

The 'display: flex' property, for instance, provides an efficient way to distribute and align content within an element. With the flexibility to alter the width, height, and order of child elements, designers can create complex layouts that adapt to different viewport sizes.

The 'display: inline-block' property, on the other hand, allows elements to sit side-by-side while maintaining block-like features. This balance makes 'display: inline-block' in CSS a handy tool when designing layouts.

Without a clear understanding of these and other display properties, developers may face challenges in achieving their desired page layout and design.

CSS Display Default Properties

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}

p.ex1 {display: initial;}
</style>
</head>
<body>
<h1>The display default Property</h1>

<h2>display: initial:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
<p class="ex1">HELLO upGradTutorial!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

</body>
</html>

CSS Display Values

  • CSS display inline

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Display Properties</title>
    <style>
        .displayElements{
            display: inline;
            width: 60%;
            height: 70%;
            margin: 70px;
        } 
        #div1{
            background-color: green;
            display: inline;
            height: 60px;
        }
        #div2{
            background-color: lightcoral;
            display: inline;
            height: 40px;
        }
        #div3{
            background-color: purple;
            display: inline;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="displayElements">
        <div id="div1">upGradTutorial I</div>
        <div id="div2">upGradTutorial II</div>
        <div id="div3">upGradTutorial III</div>
    </div>
</body>
</html>
  • CSS display inline-block

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Display Properties</title>
    <style>
        .displayElements{
            display: block;
            width: 30%;
            height: 70%;
            margin: 70px;
        } 
        #div1{
            background-color: lightseagreen;
            display: inline-block;
            height: 80px;
        }
        #div2{
            background-color: yellow;
            display: inline-block;
            height: 80px;
        }
        #div3{
            background-color: mediumvioletred;
            display: inline-block;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="displayElements">
        <div id="div1">upGradTutorial I</div>
        <div id="div2">upGradTutorial II</div>
        <div id="div3">upGradTutorial III</div>
    </div>
</body>
</html>

  • CSS display block

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Display Properties</title>
    <style>
        .displayElements{
            display: block;
            width: 60%;
            height: 70%;
            margin: 70px;
        } 
        #div1{
            background-color: green;
            display: block;
            height: 80px;
        }
        #div2{
            background-color: pink;
            display: block;
            height: 80px;
        }
        #div3{
            background-color: yellow;
            display: block;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="displayElements">
        <div id="div1">upGradTutorial I</div>
        <div id="div2">upGradTutorial II</div>
        <div id="div3">upGradTutorial III</div>
    </div>
</body>
</html>

  • CSS display run-in

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p {color:mediumseagreen;}

p.ex1 {display: run-in;}

</style>
</head>
<body>
<h1>The display run-in Property in upGradTutorial</h1>

<h2>display:run-in:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. 
<p class="ex1">HELLO upGradTutorial!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
</body>
</html>

  • CSS display none

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Display Properties</title>
    <style>
        .displayElements{
            display: block;
            width: 60%;
            height: 70%;
            margin: 70px;
        } 
        #div1{
            background-color: red;
            display: block;
            height: 80px;
        }
        #div2{
            background-color: pink;
            display: none;
            height: 80px;
        }
        #div3{
            background-color: yellow;
            display: block;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="displayElements">
        <div id="div1">upGradTutorial I</div>
        <div id="div2">upGradTutorial II</div>
        <div id="div3">upGradTutorial III</div>
    </div>
</body>
</html>

Other CSS Display Values

inline-flex: It is used for displaying an element as an inline-level flex container.

inline-grid: It is used for displaying an element as an inline-level grid container.

inline-table: It is used for displaying an inline-level table.

list-item: It is used for displaying all the elements in an <li> element as list items.

run-in: It is used for displaying an element either inline or block level, depending on the context.

table: It is used to set the behavior as a <table> for all elements.

table-caption: It is used to set the behavior as a <caption> for all elements.

table-column-group: It is used to set the behavior as a <column> for all elements.

table-header-group: It is used to set the behavior as a <header> for all elements.

table-footer-group: It is used to set the behavior as a <footer> for all elements.

table-row-group: It is used to set the behavior as a <row> for all elements.

table-cell: It is used to set the behavior as a <td> for all elements.

table-column: It is used to set the behavior as a <col> for all elements.

table-row: It is used to set the behavior as a <tr> for all elements.

none: It is used to eliminate the element, making it not display.

initial: It is used to set the property to its default value.

inherit: It is used to inherit a property from its parent element.

Conclusion

Mastering the display property in CSS is an indispensable part of any web developer's toolkit. With this comprehensive understanding, you can leverage the display property to manipulate HTML elements and achieve your desired webpage design. To further expand your web development skills, consider the specialized courses offered by upGrad.

FAQs

  1. Define display property in CSS with example?

The display property in CSS can take various values, including 'block,' 'inline,' 'none,' 'flex,' and 'grid.' Each of these values has a unique impact on the layout behavior of the HTML element.

  1. How can the display property in CSS block help in designing the webpage?

The 'display: block' property in CSS makes the element behave like a block-level element, forcing a line break before and after the element. This can be helpful in creating sections of content in your webpage design.

  1. Can you provide some display property in CSS examples?

Sure, here's an example with 'display: flex'. When you set an element's display property to 'flex', you can use additional properties like 'justify-content,' 'align-items,' and 'flex-direction' to control the layout of the element's children.

  1. How can 'display: flex' in CSS be used for responsive design?

The 'display: flex' property in CSS allows for flexible layouts that adapt to different screen sizes. It provides control over the alignment, order, and size of child elements, making it invaluable in responsive design.

Pavan

PAVAN VADAPALLI

Director of Engineering

Director of Engineering @ upGrad. Motivated to leverage technology to solve problems. Seasoned leader for startups and fast moving orgs. Working …Read More

Popular

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...