CssConceptBeginner · 3 min read

What is display inline in CSS: Explanation and Examples

The display: inline property in CSS makes an element flow along with text and other inline elements on the same line without starting a new line. Inline elements only take up as much width as their content and ignore height and width settings.

⚙️

How It Works

Think of display: inline like words in a sentence. When you write a sentence, words sit next to each other on the same line until the line ends. Inline elements behave the same way—they line up side by side horizontally.

Unlike block elements that start on a new line and take full width, inline elements only use the space their content needs. They don’t force a line break before or after themselves. This makes them perfect for styling small parts of text or icons inside a paragraph.

💻

Example

This example shows three span elements styled with display: inline. They appear side by side on the same line.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Display Inline Example</title>
<style>
  .inline-box {
    display: inline;
    background-color: lightblue;
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    border: 1px solid blue;
  }
</style>
</head>
<body>
  <span class="inline-box">Box 1</span>
  <span class="inline-box">Box 2</span>
  <span class="inline-box">Box 3</span>
</body>
</html>

Output

Three light blue boxes labeled 'Box 1', 'Box 2', and 'Box 3' appear side by side horizontally with small spacing between them.

🎯

When to Use

Use display: inline when you want elements to flow naturally with text, like styling words, links, or icons inside paragraphs. It’s great for small elements that should not break the line.

For example, inline is perfect for:

Highlighting a word or phrase inside a paragraph
Adding icons next to text without breaking the line
Styling buttons or links that appear inside sentences

If you want elements to stack vertically or control width and height, consider display: block or display: inline-block instead.

✅

Key Points

Inline elements flow horizontally with text.
They do not start on a new line.
Width and height settings are ignored on inline elements.
Common inline elements include <span>, <a>, and <em>.
Use inline for styling small parts of content without breaking layout flow.

✅

Key Takeaways

display: inline makes elements flow side by side without line breaks.

Inline elements only take as much width as their content needs.

Height and width CSS properties do not affect inline elements.

Use inline for styling text parts or small elements inside paragraphs.

For block layout or sizing control, use display: block or inline-block instead.