Home » CSS

display Property in CSS

CSS | display property: Here, we are going to learn about the display property with syntax and examples in CSS.
Submitted by Anjali Singh, on November 21, 2019

CSS | display property

The display property in CSS is used for controlling the layout and flow of an HTML document. Most of the elements have a default block or inline display value.

Syntax:

    Element
    {
        display:value;
    }

Following are the important values of display property,

  • inline
  • block
  • none
  • inline-block
  • contents
  • flex

Let's look at these properties more closely.

1) display property value: "inline"

An inline element only occupies as much width as necessary. It is horizontally with other elements of the same type and may not contain other non-inline elements.

Example of inline elements can be <span>, <img>, <a> etc.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        .span {
            display: inline;
            background: lightblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <span class="span">This is some <b>bolded</b> text!</span>
</body>

</html>

Output

CSS | display property example 1

In the above example the inline property is used to display all the content in a single line with styles applied.

2) display property value: "block"

The block element occupies the maximum available width of its parent element. The block element starts with a new line and, in contrast to inline elements, it does not restrict the type of elements it may contain.

Example of block elements can be <div>, <p>, <h1> etc.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: block;
            background: lightblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>Hello world!</div>
    <div>This is an example!</div>
</body>

</html>

Output

CSS | display property example 2

In the above example block display property is applied that is used to display the content in more than one line.

3) display property value: "none"

An element with the none value to its display property will not be displayed at all.

The value none of the display property is commonly used along with JavaScript to show or hide elements.

When an element has been set to display:none, the website ignores every other layout property for that specific element.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: none;
            background: lightblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>Hello world!</div>
    <div>This is an example!</div>
</body>

</html>

Output

CSS | display property example 3

In the above example display none property is applied that hides all the properties applied to the specific element.

4) display property value: "inline-block"

This is a CSS property that is used to display any element as an inline-block. This property uses both inline and block property of CSS.

This property with the value of inline-block is not supported by Internet Explorer 6 and 7.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            background: lightblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>Hello world!</div>
    <div>This is an example!</div>
</body>

</html>

Output

CSS | display property example 4

The above example is similar to block property with inline property that is used to align elements horizontally.

5) display property value: "contents"

The display contents property in CSS makes the container of the element disappear.

It makes that the div or p doesn't generate any box, so its background, border and other properties are not rendered.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: contents;
            background: lightblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>Hello world!</div>
    <div>Hello world!</div>
</body>

</html>

Output

CSS | display property example 5

In the above example all the properties of the div element are not appeared in the final output.

6) display property value: "flex"

The display flex property in CSS is used to display any specific element as a block level flex container.

All the other elements are displayed as it is but the flex property element is displayed as a block level flex container.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: flex;
            background: lightblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>Hello world!</div>
    <p>Hello world!</p>
</body>

</html>

Output

CSS | display property example 6

In the above example, the flex property is applied to the div element so it is displayed as a block level flex container.







Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.