0

CSS Display Property – Deep dive in block | inline | inline-block

CSS Display property

CSS Display Property

👉 Display property defines how an element will render into a page.

Let’s first see all possible values of the display property.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* multi-keyword syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;


💡In this article, we will see all the details of block, inline, and inline-block values.

block property

display: block;

Line break – block creates line break before and after the element.
New Element – A new element comes to the next line.
Height – User-defined height works here.
Width – User-defined width works here.
Margin – Works in all directions.
Padding – Works in all directions.
Border – Works in all directions.

.block {
        display: block;

        /* height, width, padding ,margin, border */
        background-color: lightblue;

        /* user defined height : works */
        height: 100px;

        /* user defined width : works */
        width: 100px;

        /* padding works */
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;


        /* margin  works */
        margin-top: 10px;
        margin-left: 20px;
        /* border works */
        border-top: 2px solid red;
        border-left: 2px solid red;

    }

inline property

display: inline;

Line break – inline does not create line break before and after the element.
New Element – A new element comes just next to the current element.
Height – User-defined height does not work here.
Width – User-defined width does not work here.
Margin – Works in only a Horizontal direction & does not work in the vertical direction.
Padding – Works in all directions.
Border – Works in all directions.

.inline {
        display: inline;
        background-color: lightgreen;

        /* user defined height : does not work */
        height: 100px;

        /* user defined width : does not work */
        width: 100px;

        /* padding works */
        padding-top: 30px;
        padding-left: 30px;
        padding-bottom: 40px;
        padding-right: 10px;

        /* margin works in horizontal*/
        margin-left: 10px;
        margin-right: 10px;
        /* margin does not work in vertical direction */
        margin-top: 10px;

        /* border -> works*/
        border-top: 2px solid red;
        border-left: 2px solid red;
    }

inline block property

display: inline-block;

Line break – inline-block does not create line break before and after the element.
New Element – A new element comes just next to the current element.
Height – User-defined height works here.
Width – User-defined width works here.
Margin – Works in only a Horizontal direction & does not work in the vertical direction.
Padding – Works in all directions.
Border – Works in all directions.

.inline_block {
        display: inline-block;
        background-color: mediumorchid;

        /* user defined height : does not work */
        height: 100px;

        /* user defined width : does not work */
        width: 100px;

        /* padding works */
        padding-top: 30px;
        padding-left: 30px;


        /* margin works in horizontal only*/
        margin-left: 10px;
        margin-right: 20px;
        /* margin does not work in vertical direction */
        margin-top: 10px;
        margin-bottom: 30px;


        /* border -> works*/
        border-top: 2px solid red;
        border-left: 2px solid red;
    }

CSS Display Property

0

Leave a Reply

Your email address will not be published.