We are going to discuss about the display inline and display law property in CSS and how and why you use them for suppose you have your h1 element and saying this is my h1 now you know very well the edge one property have a block level element Why? As you can see this is h1 whenever you add another element, it's always a start below this one. So as you can see, it's starting below your first element. So this is a block level elements okay. And also block level element has a full words property means 100 100%. Okay, so now you also have the I'm saying one on one and I'm Adding.

Cool. So now we can see it's starting this is second span is starting in the same line. So this is a block level element and this is the inline element. Okay. So now or suppose if you want to show this edge one or if you want to convert the nature of the inline element. So how can you do that, first of all I'm saying h1, all h1, I'm saying all h1 or a or I have to say, in my CSS property, and now I'm saying find all h1 and use the property, display and line go to the page refresh the page.

Now as you can see, you are showing the See, the second, this is the h2. So now this is the h1 and this is the h2. By default the nature of the h1, or sorry, the heading is the block level element. Now you're converting your block level element to inline element and because it's showing in the same line, okay, so now you can also use the property or suppose I'm saying this pan, and now I'm saying display. Sorry, now I'm saying display. Lock, refresh the page.

Now as you can see, you have just changed that span matcher. In this way, you can use the display inline and this display block properties where you use the inline display inline properly. Suppose if you want to create the navigation bar so how can you do that? Or suppose I'm saying this is my lab, I'm saying nav kit. Now I'm defining the allies. And now I'm saying this is the anchor.

This is the anchor and this is the ashram it's not going anywhere. And now I'm saying this is the home now I'm talking this on to leave and holy. Now I'm saying this is the about section about section and now I'm saying this is the for suppose contact us section, go to the page refresh the page. So now as you can see, this is because allies as the nature which is the block level so now Calder Now, this is an F. Now I'm saying find the name. And inside the name, I have allies. Now I'm saying go to the page, refresh the page, inspect element, as you can see, Li so this is your class, which you have, which we have just created.

Now I'm saying this lay in line. So now as you can see, you have just changed the property from block level element or inline element. So now I'm saying and I'm using the parody padding and fixing adding emphasis, okay. So if you are using if you are adding the background background, for suppose, red or anything which totally depend upon you, but for now, it's fine. So copy this, paste this into your code. This is an h1.

Oh, sorry. Okay, so now Refresh the page. As you can see, we have just created the basic navigation bar you can also use the URL URL or suppose I'm saying the wrong read. So this is the URL you have the read property and if you're adding the ground for suppose green to your elements and now I'm saying margin left and things are supposed 10 things and I'm saying this is the ham removing the parody so as you can see, it's fine copy this code and paste this code in your register page. fine if you're seeing that whenever someone our our these elements, so you can also change the big long curve so I'm saying copy this paste it Now I'm saying when someone all all these animals just change a ground from green to my favorite color, press the page. Now they can see you have this change if you are saying that you are going to use the color property and you are setting the white wires not working because you have the anchor inside your ally.

So how can you do that? Or suppose I'm saying find inside this class, I have anchor I'm saying color. Now I'm saying White was the fee the fish the fee. So now we can see you have added the color white property if you are adding the parodying or suppose adding two things then you can also use the padding to pixel so it's really depend upon you but in this way you can use a display inline and display block property in CSS one version