What is the difference between display: inline and display: inline-block in CSS?
Last Updated :
03 Aug, 2023
The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If we need to display the elements that are laid out as inline elements, or laid out as inline-level block containers, then the display: inline and display: inline-block properties will be implemented. In this article, we will see the display property, along with understanding the 2 different property values for the display property, i.e., the display:inline and display:inline-block property, among several other properties, & finally, will understand their basic differences & implementation through the examples.
"display: inline" Property: This property is used to display an element as an inline element (like <span>). The height and width properties are not affected on display: inline; property. It allows only the left and right sides of margins, not the top, and bottom. In simple words, it has no line break before and after its neighbor elements and it allows HTML next to it. When the element is declared with display: inline property, then it is treated as an inline element that will not start on a new line. Inline elements also cannot have a width, height, margin, or padding applied to them.
Syntax:
element {
display: inline;
// CSS property
}
Example 1: This example demonstrates the display property by setting its value as inline.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
display:inline; property
</title>
<style>
p {
color: green;
}
.gfg {
display: inline;
padding: 15px 15px;
border: 1px solid black;
color: white;
background-color: green;
}
div {
text-align: justify;
}
h1 {
color: green;
}
h1, h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
display: inline; property
</h2>
<div>
Prepare for the Recruitment drive of product based
companies like <span class="gfg">Microsoft, Amazon,
Adobe</span> etc with a free online placement
preparation course. The course focuses on various
MCQ's & Coding question likely to be asked in the
interviews & make your upcoming placement season
efficient and successful.
</div>
</body>
</html>
Output: 
"display: inline-block" Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content). It looks like an inline element but it behaves as a block element and doesn’t force to line break. It allows having a block-level appearance while still being laid out inline with other elements.
Syntax:
element {
display: inline-block;
// CSS property
}Example 2: This example demonstrates the display property by setting its value as inline-block.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
display:inline-block; property
</title>
<style>
p {
color: green;
}
.gfg {
display: inline-block;
padding: 15px 15px;
border: 1px solid black;
color: white;
background-color: green;
}
div {
text-align: justify;
}
h1 {
color: green;
}
h1, h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>display: inline-block; property</h2>
<div>
Prepare for the Recruitment drive of product based
companies like <span class="gfg">Microsoft, Amazon,
Adobe</span> etc with a free online placement
preparation course. The course focuses on various
MCQ's & Coding question likely to be asked in the
interviews & make your upcoming placement season
efficient and successful.
</div>
</body>
</html>
Output:
Difference between display: inline and display: inline-block:
|
The width and height of the display: inline elements can't be changed.
| The width and height of the display: inline-block elements can be changed.
|
It can have padding and margin in the horizontal direction. But, with respect to the vertical direction, it does not have a margin and padding.
| It can have padding and margin in all four directions.
|
It cannot have a child block element.
| It can have a child block element.
|
Similar Reads
What is the best way to include CSS file? Why use @import? CSS property can be include in the HTML page in a number of different ways. HTML documents are formatted according to the information in the style sheet which is to be included.There are many ways to include CSS file which are listed below: External style sheet (Using HTML <link> Tag): Externa
4 min read
How to style icon color, size, and shadow by using CSS ? Styling an icon's color, size, and shadow in CSS involves setting the color property for the icon's color, adjusting its size with font-size or width/height, and applying box-shadow or text-shadow for visual depth effects.When using Font Awesome, adding icons is simple and requires no downloads or i
2 min read
How to set multiple background images using CSS? The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr
2 min read
CSS Preprocessor SASS Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances standard CSS by introducing features like variables, nesting, imports, mixins, and inheritance, all while maintaining compatibility with all CSS versions.Key Features of Sass:Variables: Store reusable values such as colors
4 min read
CSS Website Layout CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site.1. Header SectionThe header is the top section of a webpage, typically containing the website's name or logo.html<html>
4 min read
How to make div not larger than its contents using CSS? There are three ways to achieve this problem: By default case Using inline-block property Using fit-content property in width and height Default Case: In HTML div is by default fit to content inside it. The example goes like this: Example 1: html <!DOCTYPE html> <html lang = "en"
3 min read
Building Tooltip using CSS A Tooltip provides users with additional information about an element when the mouse pointer hovers over it. For example, when a user hovers over a button labeled "GeeksForGeeks," additional information such as "A Computer Science Portal" can appear as a tooltip.Tooltip PositionsTooltips can be posi
7 min read
How to Set Background Color Opacity without Affecting Text in CSS? Here are two approaches to set a background color with opacity in CSS without affecting the text.1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can c
2 min read
Transition shorthand with multiple properties in CSS? The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to
2 min read
How to prevent line breaks in the list of items using CSS? The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element
1 min read