- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between display: inline and display: inline-block in CSS?
In CSS, the ‘display’ property is used to set the display style of the HTML elements on the web page. There are multiple values for the display property like flex, block, inline-block, inline, initial, inherit, etc. In this tutorial, we will learn the difference between the display: inline and display: inline-block CSS properties.
What is Display: Inline?
The display: inline CSS property is used to show HTML content in the same line. Also, it is very similar to the ≪span> element of HTML. For example, the ≪span> element inside the div element shows the content in the same line.
Also, we can’t set the height and width of the element with the display: inline CSS property.
Syntax
Users can follow the syntax below to use the ‘display: inline’ CSS property.
display: inline;
Example 1
In the example below, we have defined the div element with the ‘disp’ class name. We have added the child div element inside the div element and assigned the class named ‘disp1’.
We have set the ‘display: inline’ CSS property for the nested divs, and users can see how the text appears in the same line.
<html>
<head>
<style>
.disp {
font-size: 1rem;
height: 500px;
width: 500px;
}
.disp1 {
display: inline;
font-size: 1.5rem;
color: darkgray;
}
</style>
</head>
<body>
<h3>Using the <i> display: inline </i> CSS property to show elements in single line</h3>
<div class = "disp">
This is a text of the div element. It's <div class="disp1"> Display </div> is <div class="disp1"> inline. </div>
</div>
</body>
</html>
What is display: inline-block?
The ‘display: inline-block’ CSS property is a combination of the ‘display: inline’ and ‘display: block’ CSS properties. We understood what is the display: inline. The ‘display: block’ CSS property shows the HTML elements in the block, and we can set dimensions for them.
The ‘display: inline-block’ property also shows content in the same line but in the block pattern.
Syntax
Users can follow the syntax below to use the ‘display: inline-block’ CSS property.
display: inline-block;
Example 2
In the example below, the parent div contains two child divs with the ‘display: inline-block’ CSS property. In the output, users can observe that it looks similar to ‘display: inline’.
<html>
<head>
<style>
.disp {
font-size: 1.2rem;
height: 500px;
width: 500px;
}
.disp1 {
display: inline-block;
font-size: 1.5rem;
color: blue;
}
</style>
</head>
<body>
<h3>Using the <i> display: inline-block </i> CSS property to show elements in single line</h3>
<div class = "disp">
This is a text of the div element. It's <div class="disp1"> Display </div> is <div class="disp1"> inline-block.
</div>
</div>
</body>
</html>
What is the Difference Between display: inline and display: inline-block?
The main difference between the display: inline and display: inline-block CSS properties is that we can’t set the dimensions for display: inline. Also, we can give right and left margins and paddings for the HTML element with the ‘display: inline’ CSS property.
Example 3
In the example below, the container div contains the two divs with class names ‘inline’ and ‘inline-block’. We set the display: inline for the inline div and display: inline-block for the inline-block div.
In the output, users can observe that we can set the dimensions of the div element with the ‘display: inline-block’, and even if we set the dimensions for the ‘display: inline’, it won’t affect.
<html>
<head>
<style>
.inline-block {
background: grey;
width: 200px;
height: 200px;
padding: 30px 30px 30px 30px;
display: inline-block;
}
.inline {
background: grey;
width: 200px;
height: 200px;
margin-top: 10px;
margin-bottom: 10px;
display: inline;
}
</style>
</head>
<body>
<h3>Using the <i> display: inline-block and display: inline </i> CSS property to show elements in single line. </h3>
<div class = "container">
<div class = "inline-block">
This div has a display inline-block.
</div>
<div class = "inline">
Display: inline
</div>
</div>
</body>
</html>
Let’s understand the difference between the display: inline and display: inline-block via the difference table.
| Basis | display: inline | display: inline-block |
|---|---|---|
| Dimensions | We can’t set the dimension of the HTML element with the display: inline. | We can set the dimension of the HTML element with the display: inline-block. |
| Margin | It allows setting only right and left margins. | It allows setting top, bottom, right and left margins. |
| Padding | It allows setting only right and left paddings. | It allows setting top, bottom, right and left paddings. |
Users learned the difference between the display: inline and display: inline-block. Users can use the display: inline CSS property when they don’t need to set the dimensions for the element. For example, display: inline can work well for normal texts.
Users can use the display: inline-block when they need to show content in the same line with different dimensions. For example, we can use the display: inline-block with the cards as we need to give proper dimensions to them.
157 Views
