Display Property

       No comments

 



The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is.

The default display value for most elements is block or inline.

Block-level Elements

A block-level element always starts on a new line and takes up the full width available

Examples of block-level elements:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary

Examples of inline elements:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.

The <script> element uses display: none; as default.

Syntax:

  • display: none; -- hide any element 
  • visibility: hidden; - also hides an element. 

The element will be hidden but still occupies the space of the element.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way

Example:

  • li is a block element.
  • We can make it an inline element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS display property</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>CSS display property</h1>
    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact Us</li>
    </ul>
</body>

</html>


* {
    box-sizing: border-box;
}

h1 {
    text-shadow: 2px 2px 4px red;
    margin-bottom: 30px;
}

li {
    display: inline;
}






display: inline-block Value
  • Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
  • Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
  • Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS position property</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>The display Property</h1>

    <h2>display: inline</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet
        consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl
        sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

    <h2>display: inline-block</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet
        consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl
        sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

    <h2>display: block</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet
        consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl
        sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

</body>

</html>


style.css
* {
    box-sizing: border-box;
}

h1 {
    text-shadow: 2px 2px 4px red;
    margin-bottom: 30px;
}

span.a {
    display: inline;
    /* the default for span */
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;
    background-color: rgb(20, 144, 22);
}

span.b {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;
    background-color: rgb(20, 197, 20);
}

span.c {
    display: block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;
    background-color: rgb(20, 178, 49);
}

Output:



0 Comments:

Post a Comment

Do leave your comments