Hey Guys This Is My first blog hope you all like it suggestions for improvement are appreciate so, without any delay let's dive into it. THANK YOU!!! 😃😃😃

What is Display Property?

We all know that in CSS everything is in a square shape like a box. Display property just specifies that how are we going to display an element or a container on our website. We have Three Display Properties.

Three properties of Display:-

1. display: inline;

2. display: inline-block;

3. display: block;

• Display: inline:-

The inline property doesn't start from the new line it takes only the possible needed width of the element but we have a disadvantage in it we cannot set the width and height of the inline elements.

Example elements of inline:-

span, select, strong, code .

now you can see I have set the width and height of the element but nothing is happening because we can't set the height and width of an inline element.

as you can see I have given an inline element span and write hello world in it we can see the width it's occupying.

• Display: inline-block;

The inline-block property is almost the same as inline like the inline-block also does not start from the new line but a little different is through the inline-block property we can set the width and height of any elements. Usually, inline-block use to create nav-bars. We can make any block elements into inline-block by setting the display to inline-block.

As you can see we have set the display to block.

Every block is showing on a new line.

But after setting the property to inline-block they are all in one line.

• Display: Block;

The block property starts on a new line always and takes up the full width.

Examples for block-level elements:

div, header, aside, article, nav, ul .

• We have another property which is display: none; & visibility: hidden let's div into it and know what does this mean.

1. Visibility: hidden; This property hides the elements but lefts an empty space over the place and affects the layout. let's take an example with the help of an image.

As You can see in the image when we give the property of visibility hidden it leaves a gap from where the element was.

1. Display: none; When we set the display to none it hides the element but a little bit differently like visibility.

As you can see when we set the display to none the element which we try to hide is hidden now and doesn't leave any space over there like visibility.

So hope you liked the article and I tried my best to give you clarity on the display property.

Adios🤚🤚🤚

You Can Contact me on Twitter:-

Twitter

Thanks for the proofreading brother.. AyushCodes