What is the difference between CSS inline, inline-block, and block?

1. CSS display: inline;

An element with the inline display value does not start on a new line and only takes up the required width.

You cannot set width and height on an element that has the inline display value.

<style>
    span{
        display: inline;
        border: 1px solid red;
        
        /* width and height cannot be applied */
        width:100px;
        height: 100px;
    }
</style>

<p>Hi <span>John</span> how are you?</p>

2. CSS display: inline-block;

Like the CSS inline, element with the inline-block display value also does not start on a new line and takes up the required width. But, you can set width and height to the element.

<style>
span{
    display: inline-block;
    border: 1px solid red;
    
    /* you can set width and height */
    width:100px;
    height: 100px;
}
</style>

<p>Hi <span>John</span> how are you?</p>

3. CSS display: block;

An element with the block display value always starts on a new line and occupies the full width available. You can change the width and height.

span{
    display: block;
    border: 1px solid red;
    
    /* you can set width and height */
    width:100px;
    height: 100px;
}
</style>

<p>Hi <span>John</span> how are you?</p>