Changing display type

2.5. Changing display type#

To change an element to block or inline, you need to set the display property of the element. This means that you to make an inline element behave like a block element, or vice versa.

Syntax:

<element style="display: value;">

Valid options:

  • block — The element behaves like a block element.

  • inline — The element behaves like an inline element.

  • inline-block - The element is formatted as an inline element but allows setting of properties like height and width.

There are other options, such as flex, which we will discuss in a later section.

2.5.1. Example: Make a Block Element#

By default, <span> is an inline element. You can make it behave like a block element using display: block;.

<p>Before the span.</p>
<span style="display: block; background-color: lightblue;">
   This span now behaves like a block element.
</span>
<p>After the span.</p>

Explanation:

  • The <span> now starts on a new line and takes up the full width available.

  • It pushes the following <p> element to the next line.

  • The background colour helps visualise the block area.

2.5.2. Example: Make an Inline Element#

By default, <div> is a block element. You can make it behave like an inline element using display: inline;.

<div style="display: inline;">This div is next to </div>
<div style="display: inline; color: red;">another div on the same line.</div>

Explanation:

  • The <div> now flows within the paragraph text without starting a new line.

  • The text inside the <div> is styled in red.

  • The <div> only takes up as much space as its content requires.