CSS Inline-block Last Updated : 14 Oct, 2024 Comments Improve Suggest changes Like Article Like Report The display: inline-block property allows you to apply both width and height to an element, similar to how block elements work. Unlike the display: inline property, which only respects left and right margins/paddings, display: inline-block respects the element's full margins and paddings (including top and bottom).This property is commonly used to arrange elements, such as list items, horizontally rather than vertically.Syntaxdisplay: inline-block;Example of CSS inline-block property Here are a few examples demonstrating how the inline-block property works compared to inline and block:1. Comparing inline, block, and inline-blockThis example demonstrates the behavior of elements using display: inline, display: block, and display: inline-block. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS inline-block</title> <style> .divelement>div { display: inline-block; color: green; font-size: 20px; margin: 10px; font-weight: 700; } .example3 > span { display: block; margin: 10px; color: rgb(183, 22, 22); font-weight: 700; } .example2>div { display: inline; font-weight: 700; color: blueviolet; } </style> </head> <body> <div class="divelement"> <div>MERN</div> <div>MEAN</div> <div>DSA</div> <div>MEVN</div> </div> <p> The above elements have the property display with value inline-block </p> <div class="example2"> <div>MERN</div> <div>MEAN</div> <div>DSA</div> <div>MEVN</div> </div> <p> The above block elements "div" have the property display with value inline. </p> <div class="example3" style="margin-top: 20px;"> <span>MERN</span> <span>MEAN</span> <span>DSA</span> <span>MEVN</span> </div> <p> The above inline elements "span" have the property display with value block. </p> </body> </html> Output:2. Comparison Between inline-block and BlockThe following example compares elements with display: inline-block and their default block behavior. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS inline-block</title> <style> .divelement > div { display: inline-block; color: green; height: 50px; width: 70px; font-size: 20px; margin: 10px; font-weight: 700; } p { margin-bottom: 50px; } </style> </head> <body> <div class="divelement"> <div class="div">MERN</div> <div class="div">MEAN</div> <div class="div">DSA</div> <div class="div">MEVN</div> </div> <p> The above element have the property display with value inline-block </p> <div> <div class="div">MERN</div> <div class="div">MEAN</div> <div class="div">DSA</div> <div class="div">MEVN</div> </div> </body> </html> Output:Difference between Inline-block, Block and InlineInline-block BlockInlineInline-block is quite similar to inline, but we can have the flexibility to give width, height, and vertical margins.The block takes the full width.Inline ignores width and height.Inline-block respects both horizontal and vertical whitespace.The block respects both horizontal and vertical whitespaceInline ignores vertical whitespace.Inline-block is used when the elements need to flow inline but retain block-level styling.The height and the width can be defined.Inline only takes only the necessary width. It does not start on a next line. Comment More infoAdvertise with us Next Article CSS Inline-block S shivanigupta18rk Follow Improve Article Tags : Web Technologies CSS Similar Reads Inline CSS Inline CSS applies styles directly to HTML elements using the style attribute, allowing for quick, unique styling without external stylesheets.Quick Application: Ideal for rapid, one-off style adjustments.High Specificity: Overrides other CSS rules due to its specificity.Limited Reusability: Not sui 4 min read Primer CSS Inline block grids Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste 2 min read CSS | min-block-size Property The min-block-size property in CSS is used to create the minimum horizontal or vertical size of an element. If the writing direction is horizontal then min-block-size is equivalent to min-height property, and if it is in vertical mode then equal to min-width property. Syntax: min-block-size: length| 2 min read CSS | margin-block Property The margin-block property is used to define the logical block end margin of an element. This property helps to place margin depending on the element's writing mode, directionality, and text orientation.Syntax: margin-block-end: length | auto | initial | inherit | unset; Property values: length: Sets 2 min read CSS | border-inline Property The border-inline property in CSS is used to set the individual logical block inline border property values in a single place in the style sheet. It sets the inline border-top(left) and bottom(right) of the defining element. Syntax: border-inline: border-width| border-style| border-color; Property v 2 min read How to apply inline CSS ? In this article we will learn how to apply inline CSS, Inline CSS contains the CSS property in the body section attached to the element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute. It is used to apply a unique style to a single HTML element. S 1 min read CSS | padding-block Property The padding-block property in CSS is used to define the logical block start and end padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation.Syntax: padding-block: length|percentage|auto|inherit|initial|unset; Property 2 min read CSS | block-size Property The block-size property in CSS is used to define the horizontal or vertical size of an element's block. It coincides with the width or the height property, depending on the value of the writing-mode property. it leaves the space below are left of the element text.Syntax: block-size: length|percentag 2 min read HTML Block and Inline Elements HTML elements are either block-level, which structure the layout and span full width (like <div> or <p>), or inline, which styles content within blocks without breaking the flow (like <span> or <a>). This distinction covers 80–90% of common HTML usage.Inline and Block Level E 3 min read CSS | padding-block-end Property The padding-block-end property in CSS is used to define the logical block end padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation. Syntax: padding-block-end: length|percentage|auto|inherit|initial|unset; Property v 2 min read Like