Display Property in Cascading StyleSheet


Let's first create an HTML file.
html file
In the preceding Index.html file, we have added a paragraph element and inside this element, we have added another element “span”. Along with that, we have added a div element and inside this element, we have added a paragraph element.
Open the file in a browser.
Open file in browser
Let's add some styling to these two elements and for that create an external CSS file.
We have added a very simple style for our elements. We gave a background color of Orange to the span and gave a width of 150px and a background color of Grey to the div.
Open the file in a browser.
file in browser
Now let's talk about the display property.
By default elements like span, img and anchor are inline elements. Let's provide the span element a width of 200px and height of 100px.
default elements
Refresh the page and you will see nothing is happening.
Refresh the page
Let's provide this span element a margin of 110px vertically and 10px horizontally.
element margin
Refresh the page and you will see that the horizontal margin is recognized but the vertical values were ignored.
horizontal margin
Let's provide this element a vertical padding of 110px and a horizontal padding of 60px.
vertical padding
Refresh the page and you will see something very interesting. The span element is acknowledging the horizontal padding and the vertical padding but the neighbor elements are ignoring the vertical padding.
To make this look clear, set the display property of the span element to block.
display property
Refresh the page.
Refresh page
So once we set the display to block, the custom width, height and the vertical margin we passed are now being observed. Even the vertical padding is now recognized by the neighbor element. So, if you want to apply these custom styles to an inline element then you must convert these inline elements to block-level elements.
For now, remove these properties from the span element except the color property.
remove properties
Refresh the page
color property
Elements like div, paragraph, and headings are block-level elements in which we can assign a custom width, height, padding, float and so on.
Let's say for some reason we want to assign a custom width and height to an inline element but we don't want to change the display property to a block because block-level elements are displayed in their own line.
There is another display value inline-block.
display value
Here we have set the width of 100px and height of 50px. We set the display property to inline-block and gave padding of 50px vertically and 25px horizontally and with that, we are aligning the text to be displayed in the center.
Refresh the page and you will see the span element is displayed as an inline element to the other text and with that, it recognizes the block level customizations too.
level customizations


In this article, we have discussed the three most important display property values Inline, Block and Inline-Block.
I hope you like this. Thank you.