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;
}
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;
}
Top comments (2)
Maybe you're missing the cover image. By the way, learnt new things. Good post! 👍
I am glad you learned new things Fahim :D. and yes, I have skipped the cover images for now.