Making a Block-Level Element Behave Like Inline Using CSS
Even if an element is inherently block-level (like <div>), you can make it behave like an inline element by changing its display property in CSS.
display: inline– Makes the element behave fully like an inline element. Width and height are ignored, and it flows inline with text.display: inline-block– Keeps the element inline with text but allows you to set width, height, padding, margin, and border like a block element.display: inline-flex– Makes the element inline while establishing a flex container for its children.display: inline-grid– Makes the element inline while establishing a grid container for its children.
In this example, the first div behaves like inline text, ignoring width and height. The second div behaves like inline-block, allowing width, height, and spacing while remaining inline with the paragraph text.
Use
inlinewhen you only need the element to flow with text and don't require sizing control.Use
inline-blockfor elements that need inline flow but still respect width, height, and box model properties.Consider
inline-flexorinline-gridwhen arranging child elements with Flexbox or Grid inside an inline-level container.