Master Class: CSS display
Hey Reader! I'm a full-stack web developer geek who is only now beginning to blog. I have a passion for creating web apps from the ground up and enjoy learning about all the many technologies used in the process.
You can read a variety of lessons, observations, and thoughts on my Hashnode blog as I make my way through the world of full-stack web development. I'll be sharing everything I learn along the road, from introductory lessons for beginners to more complex subjects, as well as some of the difficulties I encounter and how I get beyond them.
Follow me as I learn how to build a full-stack website, one or two blog post per week! Together, let's build some amazing web applications while learning.
In this article, we will have a deep view on CSS properties Display
Starting with Display Property :
The display property specifies the display behavior of an element. It shows how the content is going to get displayed. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet.
Syntax: display: value;
There are three types of display properties in CSS :
display-inline: It will display inline-level content irrespective of the default value of the property which is inside the content.
syntax: display: inline ;
Here we can see that <p> tag which is block level element as a default, means it takes the entire width available. By using inline property we can display inline-level content irrespective of the default value of the property which is inside the content.
display-block: It will display block-level content irrespective of the default value of the property which is inside the content.
syntax: display: block ;
Here, We can see that <span> is the default inline-level element By using the Block property we can display block-level content irrespective of the default value of the property which is inside the content.
inline-block: It will display inline-level content irrespective of the default value of the property which is inside the content with the fixed space and we can provide width to the content unlike other properties
syntax: display: inline-block ;
We can provide width to the content by using the display inline-block property.
