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.

styling

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

elements

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

level customizations

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.

Up Next
    Ebook Download
    View all
    Learn
    View all