What is the Difference Between the "inline" and "inline-block" Values of the CSS display Property
In this snippet, you can see what is the difference between the inline and inline-block display in CSS. We’ll demonstrate an example to show their difference.
Difference between display: inline and display: inline-block
As we know, the CSS display property specifies the box type used for HTML elements. Two frequently used values of this property are "inline" and "inline-block" that seem quite similar at first sight. But let’s see what is the actual difference between them.
In contrast to "inline" display, elements with an "inline-block" display allow specifying a width and height for the element. Also, the top and bottom margins and paddings are respected with "inline-block".
An element with "inline-block" is placed as an inline one on the same line with the adjacent content, but it behaves like a block element.
Now, let’s see an example, where we use both the "inline" and "inline-block" values to demonstrate the difference between them.
Example of using the "inline" and "inline-block" display on <span> elements:
Example of using the "inline" and "inline-block" values of the display property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span.inline {
display: inline; /* the default for span */
padding: 3px;
border: 1px solid #000;
background-color: #749be8;
}
span.inline-block {
display: inline-block;
width: 100px;
height: 50px;
padding: 3px;
border: 1px solid #000;
background-color: #66de9c;
}
</style>
</head>
<body>
<h1>Example of the CSS display property</h1>
<h2>display: inline</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span class="inline">Lorem Ipsum</span> has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.
</div>
<h2>display: inline-block</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span class="inline-block">Lorem Ipsum</span> has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</div>
</body>
</html>Result
<div class="demo px-2.5 mt-1 mb-5 not-prose"> display: inline<div class="mb-5"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span class="inline">Lorem Ipsum</span> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> display: inline-block<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span class="inline-block">Lorem Ipsum</span> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
Example of using the "inline" and "inline-block" display on <strong> elements:
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-weight: bold;
margin: 0 0 15px;
}
p:first-of-type {
padding-bottom: 5px;
}
div {
margin: 0 0 40px;
}
strong {
padding: 10px;
width: 150px;
height: 150px;
border: 5px solid purple;
background-color: pink;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
</style>
</head>
<body>
<h1>Example of the CSS display property</h1>
<p>display: inline</p>
<div>
<strong class="inline">Lorem Ipsum</strong>
</div>
<p>display: inline-block</p>
<div>
<strong class="inline-block">Lorem Ipsum</strong>
</div>
</body>
</html>To sum up, the styles supported by inline elements are margin-right, margin-left, padding-left and padding-right, whereas inline-block elements support height, width, margin and padding.