DISPLAY & POSITION

Display & Position

Display :

Every element on a web page is a rectangular box. The Display propertyin CSS determines just how that rectangular box behaves. This property defines how the components (div, hyperlink, heading etc.) are going to be placed on the web page.

There are only a handful of values that are commonly used:

display: inline;
display: inline-block;
display: block;
display: none;

1) Inline : The inline element takes the required width only. It does not start on a new line and only takes up as much width as necessary. We can change other block-level elements to behave as inline element by declaring display: inline property.

Examples of inline elements: <span>, <a>, <img>,<select>,<button> etc.

Example :

<!DOCTYPE html>
<html>
    <head>
        <style>
            p, span {
                border: 1.5px solid blue;
                padding: 5px;
                color: maroon;
            }
            p {
                display: inline;
            }
        </style>
    </head>
    
    <body>
        <span>HTML Tutorial.</span>
        <p>CSS Tutorial.</p>
        <p>JavaScript Tutorial.</p>
        <p>React Tutorial.</p>
    </body>
</html>

This will produce the following result −

2) Block : The CSS display block element takes as much as horizontal space as they can. Means the block element takes the full available width. They make a line break before and after them.

Examples of block-level elements : <p>, <h1>- <h6>, <ul>, <ol>, <div>,<header> etc.

Example :

<!DOCTYPE html>
<html>
    <head>
        <style>
            p, span {
                border: 1.5px solid blue;
                padding: 5px;
                color: maroon;
            }
            span {
                display: block;
            }
        </style>
    </head>
    
    <body>
        <span>HTML Tutorial.</span>
        <p>CSS Tutorial.</p>
        <p>JavaScript Tutorial.</p>
        <p>React Tutorial.</p>
    </body>
</html>

This will produce the following result −

3) Inline-Block : The CSS display inline-block element is very similar to inline element but the difference is that you are able to set the width and height for element.

Example :

<!DOCTYPE html>
<html>
    <head>
        <style>
            p, span {
                border: 1.5px solid blue;
                padding: 5px;
                color: maroon;
                display: inline-block;
                width: 200px;
                height: 40px;
            }
        </style>
    </head>
    
    <body>
        <span>HTML Tutorial.</span>
        <p>CSS Tutorial.</p>
        <p>JavaScript Tutorial.</p>
        <p>React Tutorial.</p>
    </body>
</html>

This will produce the following result −

4) None : The display: none value totally removes the element from the page. It will not take any space.

Example :

<!DOCTYPE html>
<html>
    <head>
        <style>
            span {
                border: 1.5px solid blue;
                padding: 5px;
                color: maroon;
            }
            p {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <span>HTML Tutorial.</span>
        <p>CSS Tutorial.</p>
        <p>JavaScript Tutorial.</p>
        <p>React Tutorial.</p>
    </body>
</html>

This will produce the following result −

Note : visibility:hidden; also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affects the layout.

Position :

The CSS position property sets how an element is positioned in a document.

The different position values are:

static
fixed
sticky
relative
absolute

You can position an element using the top, bottom, left and right properties. These properties can be used only after position property is set first.

Example :

<!DOCTYPE html>
<html>
    <head>
        <style>
            h2 {
                color: rgb(165, 0, 0);
                margin-top: 50px;
            }
            .box1 {
                background: rgb(33, 33, 251);
                width: 290px;
                padding: 6px 12px;
                color: #ffffff;
                position: relative;
                top: 26px;
                left: 50px;
            }
            .box2{
                background: rgb(211, 181, 181);
                width: 400px;
                height: 150px;
                padding: 6px 12px;
                position: relative;
            }
            .box3 {
                background: rgb(14, 136, 120);
                color: #ffffff;
                width: 200px;
                padding: 6px 12px;
                position: absolute;
                top: 70px;
                right: 50px;
            }
        </style>
    </head>
    
    <body>
        <h2>position: relative;</h2>
        <div class="box1">
            This div element has relative position with top: 26px & left: 50px 
        </div>

        <h2>position: absolute;</h2>
        <div class="box2">
            This div element has position: relative
            <div class="box3">
                This div element has absolute position with top: 70px & right: 50px 
            </div>
        </div>
    </body>
</html>

This will produce the following result −