CSS Display property: Inline, block, inline block

Inline property:- when inline property is applied to an element then the following values are not respected (height/width values, Top and bottom values of margin /padding.

In block and inline-block all the properties are respected (we can set margin/padding/height,width property to the element).

inline-block “- line-break not present in inline-block property.

Display block:- line break is there.

Here, we can change the display property and can check the difference in vs code.

<style>
    body{
        background-color: aqua;
    }

    p{
        border: 2px solid black;  
    }
    span {
        display: inline-block;
        font-size: 40px;
        border: 2px solid black;
        height: 100px;
        width: 100px;
        padding-bottom: 50px;
        /* margin-bottom: 50px; */
    }
<body>
    <p>this is a <span>cat</span></p>
</body>
</html>

See the Pen Untitled by Raman kumar (@ramankumarlal) on CodePen. " data-card-controls="0" data-card-theme="light">

<style>
    body{
        background-color: aqua;
    }

    p{
        border: 2px solid black;  
    }
    span {
        display: inline-block;
        font-size: 40px;
        border: 2px solid black;
        height: 100px;
        width: 100px;
        padding-bottom: 50px;
        /* margin-bottom: 50px; */
    }
<body>
    <p>this is a <span>cat</span></p>
</body>
</html>

Inline element:- element that are injected inside block level element tag.

inline elements do NOT start on a new line and only takes up as much width as its content. So, if you try to set any width and height, it will have NO effects.

Block element;- Occupy their own space in web page,. that means block elements will occupy the entire width of its parent element.

Inline-block: Displays an element as an inline-level block container. You CAN set height and width values.**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position property in CSS layout</title>
</head>
<!-- <style>
    body{
        background-color: aqua;
    }

    p{
        border: 2px solid black; 
        height: 150px;
        width: 500px; 
    }
    span {
        display: inline;
        font-size: 40px;
        text-align: right;
        border: 2px solid black;
        height: 100px;
        width: 100px;
        padding-bottom: 300px;
        /* margin-bottom: 500px; */
    }
</style> -->
<style>
    .container {
      height: 1000px;
      width: 1000px;
      border: 5px solid rgb(184, 33, 171);
      border-radius: 5px;
      /* display: flex;
      flex-direction: row-reverse; */
    }

    nav{
        list-style-type: "\1F44D"; // thumbs up sign;
        display: Flex;
    }
    .position {
        display: block;
        margin-right: 50px;
        margin-top: 25px;
        height: 50px;
        width: 50px;
        border: 2px solid #450ca0;
        text-align: center;
        }

        #Two{
            background-color: rgb(146, 146, 15);
            position: relative;
            left: 50px;
        }
</style>
<body>

    <nav class="red">
        <li class="white">One</li>
        <li class="white">Two</li>
        <li class="white">Three</li>
        <li class="white">Four</li>
    </nav>
    <div class="container">
        <div class="position">One </div>
        <div class="position" >Two</div>
        <div class="position">Three</div>
        <div class="position" id="Two">Four</div>
    </div>

</body>
</html>

Display: Inline, block, inline-block

Table of contents

CSS Display property: Inline, block, inline block