1. CSS display inline

In this tutorial, we focus on one of the most common CSS display property values which is display: inline.

when you set an inline value for your display property, it uses only the required width. That means the flow of elements doesn't break or they do not begin in a new line.

Some Inline Elements

you can see some inline elements below.

  • <a>
  • <img>
  • <code>
  • <cite>
  • <em>
  • <b>
  • <strong>
  • <button>
  • <input>  and so on.

Example
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#p3{
			display: inline;
			color: blue;
		}
	</style>
</head>
<body>
<p id="p3">The inline display</p>
<p id="p3">value display all</p>
<p id="p3">element in inline with out break.</p>
</body>
</html>
Output

The inline display

value display all

element in inline with out break.


Example: With some inline elements 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#p3{
			display: inline;
			color: blue;
		}
	</style>
</head>
<body>
<p id="p3">The <em>inline display</em> </p>
<p id="p3">value display all</p>
<p id="p3">element in inline <strong>with out break.</strong> </p>

</body>
</html>
Output

The inline display

value display all

element in inline with out break.


2. CSS Display inline-block
Inline-block value is similar to inline value but you can adjust the height, width, margin, and padding in inline-block. It is commonly used to construct navigation bars.
Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	.nn{
		background-color:#330000;
		text-align: left; 
	}
	.nn li{
		display: inline-block;
		font-size: 20px;
		text-decoration: none;
		padding-left: 10px;
		padding-right: 10px;
		color: white;
		width: 75px;

	}	
	</style>
</head>
<body>
<ul class="nn">
	<li>Home</li>
	<li>About</li>
	<li>Contact</li>
</ul>
</body>
</html>
Output