DEV Community

zaira
zaira

Posted on

Display in CSS

#webdev #beginners #css #tutorial

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Image description

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

.blue {
  display: inline;
}

.yellow {
  display: inline;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

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;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
fahimfba profile image
Md. Fahim Bin Amin •

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

Collapse
 
hira_zaira profile image
zaira •

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