‫Hey, there.
‫Welcome back.
‫On the side.
‫Now let us discuss about how we are going to work with our elements in terms of display as well as position.
‫So we have this web page.
‫We are going to control their display setting as a list, their position.
‫Maybe I want this to be 10 percent down 10 percent, right?
‫Or something else.
‫So in the next two lectures, we are going to do that now with elements.
‫When I I referred, I referred to paragraph as well as dim as well as image as well as links everything.
‫So we are going to work with the display as well as the position setting.
‫Now, if you remember, we discussed about two important points.
‫That is how block work, as well as how in line what if you remember, it's great.
‫If not, let's do a quick revision.
‫So there are basically two types of displays sitting by default, if you work with maybe section, maybe
‫do headings paragraph form for header, all of them are block.
‫That means they are block level element if you just jump.
‫Or how about all this feedback?
‫It's a complete block.
‫It's you jumping on P-Dog.
‫It's a complete block.
‫If you want to work on this section, it's a complete block.
‫That means they're taking 100 percent of the.
‫Maybe I do something small.
‫Maybe I extended it with C.
‫Section is taking 100 percent.
‫Paragraph is big 100 percent.
‫So these are all are block level elements, then we have in 911.
‫That means they only take space, which is required if I went over to this Eatock.
‫You can see it's only taking the space, which is required.
‫But if I hover over to dispute that it's taking the full weight, you see the blue line.
‫That's how this is going to work.
‫So these are the two type of display, actually, and these are default setting.
‫If you click on the speaker and if you try to scroll here, you can see the display is blocked by default
‫as well as there is some margin.
‫So I hope you got the best idea.
‫Now let's understand how we are going to work.
‫So there is two values.
‫Now you understand that it's displayed this block.
‫Then there are few other values.
‫There is none.
‫That means you are going to just remove this.
‫It will not be visible.
‫Then there is a line block that means a combination of block as well as combination of a line.
‫Then there are certain things related to Flexbox that we are going to discuss as a separate section.
‫There is something like great we're going to discuss as a separate section.
‫So you have to understand these face value.
‫The best thing you can do right now after completing this lecture is just jump onto the thesis reference
‫and then go on to display.
‫Maybe you can take any other website.
‫Just read about display after this lecture.
‫So we are going to perform all of them in a practical way.
‫So there is something like Babel also.
‫We don't use that.
‫Then Flexbox has said we are going to discuss it in our separate section grid separate section.
‫So these are the values that you are going to work with.
‫Great.
‫Let me get back here.
‫Here, I have prepared a quick example.
‫I have a section with our last name as container.
‫Then I have these three dogs which must be done and with their separate classes.
‫That's a simple goal.
‫And then we have a dog, which is an inline block.
‫This looks fine.
‫So let me jump here.
‫I cannot this dog in a different manner so we can spot it directly.
‫OK.
‫Everything looks fine for now, I took this example with 16 pixels, so it's easy for us in a visual
‫manner.
‫OK, let's understand everything is done.
‫So by default, the display is block, right?
‫If I try to use displays in name, what will happen?
‫So here if I use display as in line for all three of them.
‫Now, if I save this one, get back here, you can see they are all jumbled up quiet because now they
‫are working in an inline form.
‫Here you can see this is be done as soon as the requirement of their space is done.
‫The next bag starts now.
‫These are two lines basically from here to at the next FedEx start from here to here.
‫So if I just extended a bit hard one, you see, it's only taking this space that is required.
‫That's how this is going to work.
‫This looks like double, but it's taking space from here to here.
‫So that's pretty important.
‫Now, the best thing we can do is add some background color to understand more about them.
‫So here if I use background color now remember background is a specific property that has multiple values.
‫Background color is an individual value.
‫Here, let me use control less space to get all the ideas.
‫It's recommended to use hash value or IGB value, but it's easy for them because I'm using these names.
‫So let me use this one.
‫Save this one.
‫Get back here.
‫You see, it's taking this deal here.
‫OK, let me try to use background values for all of them.
‫Maybe Aqua and then background values, maybe this same this one.
‫I hope you got the idea from here to here, then head to head and then here to here, that's our days
‫working.
‫But if I remove that inane display?
‫Save this one, you can see now they're taking hundred percent with.
‫And that's where the whole game is with this display.
‫The game of vet, I hope you got the basic idea.
‫I am trying to explain this again and again because it will help you to understand the other part.
‫So when we are in the form of block, we have access to it.
‫We can play with it.
‫I had if I worked maybe 200 pixels, save this one.
‫Get back here, you can see I'm able to apply this change.
‫But if this was an in line that I cannot do this so hard, if I try to use an inline element, maybe
‫let me remove this third one for now and play with these two itself and try to use in line as a display,
‫as a light, as well as this display as line.
‫Save this one.
‫Get back here, you can see my world is not working.
‫Let me try to take it again.
‫Maybe.
‫Same for here.
‫Let me try to speak with us.
‫500 Nixon.
‫Save this one.
‫Say it's not working.
‫Why?
‫Because when we are working with in line these with only work with log elements, so that's the first
‫major change.
‫Now let me try to use height.
‫Let me save this one.
‫Get back here, even high does not working, so that's important for you to understand that when we
‫are working with in line, it is going to work only with this pace that is required now if I try to
‫use Block.
‫It worked fine here, you can see they are taking the exact height, which is 500 mixes that we have
‫provided.
‫Same with height also.
‫Now this is important because now we have a line we have block.
‫We know about their property.
‫But the third one is in lane block.
‫So in block drive to Big Best-Of in line as well as not, that means in line block is a property you
‫can see and line up.
‫What does this mean?
‫Is it is going to take only this piece, which is required, but if it's provided, then it will take,
‫for example, here, let me take this in line block.
‫Save this one.
‫Get back here.
‫You can see the work here is only the required one, but the high does whatever we have provided.
‫So this is important in line lock.
‫We can provide and edit according to our self in block.
‫It is 100 percent red and an in-line.
‫It is just a required space that we are going to walk.
‫Now there is none with just delayed the element from my Web page itself.
‫If I use none or the first, you can see the element is not visible, but the second one is visible,
‫first is not visible.
‫I hope you got the idea about none.
‫That means the cord is there, but we don't want to use it right now and we said it as none.
‫This basically works.
‫Maybe we have some images that we want to display on a laptop.
‫That means bigger screen.
‫But then they are using on phone.
‫We want to hide them, or maybe something that we want to show on phone, but hide on the bigger screen.
‫That's where this nun comes into the picture.
‫So that's all, I hope you got the idea there is one other type, which is known as, I guess, a list
‫item.
‫It is just the blog.
‫It is just the blog, but have a bullet point.
‫We don't use it, actually.
‫I hope you got the idea.
‫No, let me know how quickly we can display none.
‫That means the element is completely removed, as discussed.
‫Then there is a line that means the element is done in Berlin.
‫It behave like simple.
‫That means only the required spaces allowed.
‫Any height and weight applied will have no effect.
‫Great.
‫I hope you got the idea.
‫Then we have block elements down into a block element.
‫It start on a new line and takes up the whole space.
‫Yup.
‫Like if you have multiple beers, we know they start from new line, then we are in line block the elements
‫shared property of both an inmate and a block element in line because the element of simple text and
‫insert itself in a block of text and block because we can apply height as well as weight value.
‫That's it.
‫That's how they are going to work.
‫Now this table is not utilized much.
‫This flex pork is itself a different section.
‫And this crater itself is a different section at this point of time.
‫What I will recommend you is just play with it.
‫Now, let me take a quick new example that will help you to clear all your doubt again.
‫So the first thing I'm going to do is I'm going to take three lives and add three different images.
‫So let me use doc and then the class numerically.
‫And presenter, so it will create a day of directly and use, I am due to Android, my image from media
‫and I'm going to utilize my little word selfie time.
‫So let me copy this one here.
‫Let me yours, Vicky.
‫And here, let me use her, save this one.
‫Now remember, this debate follows Block, so that means they will be in three different lines.
‫Get back here.
‫One two three four that in three different plane.
‫Maybe if I change the property of this device into inline, that means they will be single.
‫So if I dig this day and change the display to a line now, there should be a sequence one two three
‫knots walking grid.
‫But what if I want to restrict the space for my display?
‫That means for my do my 50 by 50.
‫If I'm using in line, it will not happen.
‫Get back here.
‫This is not walking in that case, what?
‫I'm going to utilize it.
‫I'm going to use in my block.
‫Save this one.
‫Get back here.
‫Now you can see this is restricted to 50 by 50.
‫Here, the image size is extending because we haven't changed in its size.
‫But now we can also control the image.
‫We can control image, and it can take only the 100 percent.
‫Whatever the availability is a member, they depend on inside the percentage.
‫So if I see how it is handed and where it is and if I save this one.
‫Get back here now.
‫The size of this image is dependent on the day it will not take extra space.
‫Maybe the is hundred by 100.
‫That's how these image sites will depend.
‫And this is important.
‫Suppose if we make this Deb responsive and for the lectures, we will do that.
‫So that means this image will automatically be responsive because as soon as we change the size of this,
‫it changes the size of image you can see.
‫As I'm changing the size of this device, the image size automatically changes.
‫And that's where this whole in block comes in for a chat.
‫Now this was the important example.
‫That's all, I hope this lecture was helpful, and now you understand all of them.
‫Thank you for calling.
‫And I assume this in the next one.