Display Property in Cascading StyleSheet

Let's first create an 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.



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.



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.



Refresh the page and you will see nothing is happening.



Let's provide this span element a margin of 110px vertically and 10px horizontally.



Refresh the page and you will see that the horizontal margin is recognized but the vertical values were ignored.



Let's provide this element a vertical padding of 110px and horizontal padding of 60px.



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.



Refresh the 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.



Refresh the page.



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.



Here we have set the width of 100px and height of 50px. We set the display property to inline-block and gave a padding of 50px vertically and 25px horizontally and with that we are aligning the text to be displayed in 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.



Summary

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.