Display in CSS

In this article, we would discuss the three ways that elements can be displayed on the web page. The three methods are:

• Inline
• Block
• Inline-block

Table of contents

• Inline display in CSS
• Block display in CSS
• Inline-block display in CSS

Inline display in CSS

span by default has the inline display. This means that a span element would stay on the same line where it was declared. Two spans declared together, would always stay on the same line.

Other html elements such as a div are block level elements by default. This means that each div goes to a separate line and takes full width of the screen.

You can make a div inline like this:

div {

    display: inline;
}

Almost all other elements besides span are block by default.

Note that, you cannot set the height and width of inline elements. they take the space as much as the content inside needs.

Block display in CSS

Block elements take full width of the page. Block elements force the next element to go to the next line.

element{
   display: block;
}

You can make them appear on the same line using this CSS:

.blue {
  display: inline;
}

.yellow {
  display: inline;
}

Result:

Inline-block display in CSS

An inline-block uses the powers of both- inline and block displays:

block allows us to set the height and width.
inline allows us to position elements in the same line.

You can use inline-block like this:

element{
   display: inline-block;
}

Comments

[Md. Fahim Bin Amin]

Maybe you're missing the cover image. By the way, learnt new things. Good post! 👍

[zaira]

I am glad you learned new things Fahim :D. and yes, I have skipped the cover images for now.