Playing with Display in CSS is tricky stuff that’s why we are gifted with that much Display Properties in CSS but still, a lot of new programmers becomes confused in common terms and in this tutorial i am gonna help you to get the difference of inline vs inline-block

So Let’s Start

inline

So the first is inline property when we use this property the element arrange themselves in the same line means they don’t shift to the new line and adjust their width as much as they need means we can’t set width and height it will not work

Like our anchor tag is by default inline means no matter how much links we create they all gonna continue in the same line

Like in here if we use this code without any style they all are gonna be in the same line

<!DOCTYPE html>
<html>
<head>
	<title>inline</title>
</head>
<body>
<a href="">Link 1 </a>
<a href="">Link 2 </a>
<a href="">Link 3 </a>
<a href="">Link 4 </a>
<a href="">Link 5</a>
</body>
</html>
inline example
inline

also if you will try adding width and height it will don’t show a change like this

<!DOCTYPE html>
<html>
<head>
	<title>inline</title>
</head>
  <style>
    a{
      border : red 2px solid;
      width:500px;
    }
  </style>
<body>
<a href="">Link 1 </a>
<a href="">Link 2 </a>
<a href="">Link 3 </a>
<a href="">Link 4 </a>
<a href="">Link 5</a>
</body>
</html>

means as you can see here in the image

inline example 2
inline example 2

Now as you can see that when we tried to set width it doesn’t work here on the anchor tag

Now Let’s talk about inline-block but before that let’s talk about what is block ??

block

The block as its name states it basically defines when we use this the element starts from a new line and takes the entire width available as we have in our paragraph tags and as inline, we can’t set width and height but if we want we can set it in block

Let’s see an example

<!DOCTYPE html>
<html>
<head>
	<title>Block</title>
</head>
<body>
	<p>It's  paragraph no.1</p>
	<p>It's  paragraph no.2</p>
	<p>It's  paragraph no.3</p>
</body>
</html>

as paragraph tags are by default block-level elements so when we use this code we get output like this

block example
block example

Now let’s try to adjust the width and height of these paragraph’s and let’s see if we get it

<!DOCTYPE html>
<html>
<head>
	<title>Block</title>
</head>
<style type="text/css">
	p{
		border: 2px red solid;
		width: 400px;
	}
</style>
<body>
	<p>It's  paragraph no.1</p>
	<p>It's  paragraph no.2</p>
	<p>It's  paragraph no.3</p>
</body>
</html>

and when we use this code we get an output like this

block width adjusting example
block width adjusting example

So as you can see us finally succeeded to set the width of these great block-level elements

Now finally Let’s talk about inline-block level elements

inline-block

So as its name suggests it has the features of both inline as well as block what that means is that when we set this property than the element does not start with the new line but if we want we can change its width and height

Let’s see an example of what we can achieve with this if we try it on the above examples

Let’s start with the example no. 1 of inline

<!DOCTYPE html>
<html>
<head>
	<title>inline</title>
</head>
<body>
<a href="">Link 1 </a>
<a href="">Link 2 </a>
<a href="">Link 3 </a>
<a href="">Link 4 </a>
<a href="">Link 5</a>
</body>
</html>

Let’s try using inline-block here

<!DOCTYPE html>
<html>
<head>
	<title>inline</title>
</head>
  <style>
    a{
      display:inline-block;
      border:2px red solid;
      width:400px;
    }
  </style>
<body>
<a href="">Link 1 </a>
<a href="">Link 2 </a>
<a href="">Link 3 </a>
<a href="">Link 4 </a>
<a href="">Link 5</a>
</body>
</html>

if we do it we get an image like this

using inline-block
using inline-block

as you can see that here now the element starts with a new line like inline also we can adjust the height and width like block

Let’s try it on the second example

<!DOCTYPE html>
<html>
<head>
	<title>Block</title>
</head>
<style type="text/css">
	p{
		border: 2px red solid;
		width: 400px;
	}
</style>
<body>
	<p>It's  paragraph no.1</p>
	<p>It's  paragraph no.2</p>
	<p>It's  paragraph no.3</p>
</body>
</html>

so as you can see let’s try inline-block here

<!DOCTYPE html>
<html>
<head>
	<title>Block</title>
</head>
<style type="text/css">
	p{
        display:inline-block;
		border: 2px red solid;
		width: 400px;
	}
</style>
<body>
	<p>It's  paragraph no.1</p>
	<p>It's  paragraph no.2</p>
	<p>It's  paragraph no.3</p>
</body>
</html>
using inline-block
using inline-block

so as you can see that now all the paragraphs are arranged in one line and also have styling properties of height and width like of a block element

Wrapping UP

So Now maybe you got that what are inline, block and inline-block levels in CSS and also got their difference if you still have any queries, criticism or appreciations. If you want to know other properties you can check MDN DOCS I welcome them as well and if you liked it i also recommend checking out my other posts as well Handling White Spaces by CSS is a good starting point