Colevate Online Tech Tutorials

The inline value is one of its most common values. Elements with display: inline do not start on a new line and only take up as much width as their content requires. You cannot set the width or height of inline elements; these properties are determined by the content within them.

Example 1: Basic Inline Elements

CSS

/* style.css */
span {
  display: inline; /* This is the default for span, but shown for clarity */
  border: 1px solid red;
}

HTML

<p>This is a paragraph with a <span>span element</span> inside it.</p>

Explanation

In this example, the <span> element is an inline element. Notice how it flows within the text of the paragraph and does not force a line break. The border demonstrates that it only wraps around the content itself.

Example 2: Inline Links

/* style.css */
a {
  display: inline; /* Default for anchor tags */
  background-color: yellow;
}

HTML

<p>Click on this <a href="#">inline link</a> to learn more.</p>

Explanation

The anchor (<a>) tag is another default inline element. It sits neatly within the line of text, and any background color applied will only cover the area of its content.

Example 3: Images as Inline Elements

CSS

/* style.css */
img {
  display: inline; /* Images are inline by default */
  width: 50px; /* Note: width and height can be set on replaced inline elements like images */
}

HTML

<p>Here is some text with an <img src="image.png" alt="inline image"> inside.</p>

Explanation

Images (<img>) are also inline elements. They are placed within the flow of text. Unlike non-replaced inline elements, you can set width and height on an image.

Example 4: Ignoring Width and Height

CSS

/* style.css */
.inline-box {
  display: inline;
  width: 200px; /* This property will be ignored */
  height: 100px; /* This property will be ignored */
  background-color: lightblue;
}

HTML

<div>This is a div, and here is an <strong class="inline-box">inline strong element</strong>.</div>

Explanation

This example shows a <strong> element set to display: inline. The width and height properties are completely ignored by the browser because inline elements' dimensions are dictated by their content.

Example 5: Margin and Padding on Inline Elements

CSS

/* style.css */
.inline-spacing {
  display: inline;
  margin: 20px; /* Horizontal margin works, vertical does not affect line height */
  padding: 10px;
  background-color: lightgreen;
}

HTML

<p>An example of an <em class="inline-spacing">inline element with spacing</em> in a sentence.</p>

Explanation

For inline elements, horizontal margin and padding will push other elements away. However, vertical margin and padding will not affect the space between lines of text, though the background color will show the padding area.

Example 6: Forcing a Block Element to be Inline

CSS

/* style.css */
p {
  display: inline;
  background-color: #f0f0f0;
}

HTML

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Explanation

By default, paragraph (<p>) elements are block-level. By setting display: inline, we force them to behave like inline elements, causing them to sit next to each other on the same line.

Example 7: Multiple Inline Elements

CSS

/* style.css */
.inline-item {
  display: inline;
  border: 1px solid blue;
  margin-right: 10px; /* Adds space between the elements */
}

HTML

<div class="container">
  <span class="inline-item">Item 1</span>
  <span class="inline-item">Item 2</span>
  <span class="inline-item">Item 3</span>
</div>

Explanation

This demonstrates how multiple elements with display: inline will render one after another horizontally, without any line breaks. The margin-right property is used to create a visual separation between them.

CSS

Inline Display