‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us discuss about Box Mortar, it's pretty important for you to understand
‫this.
‫Everything that we do in common is divided into box.
‫If I jump on this particular example, right click here.
‫Click on Inspect.
‫You can see all of them are some type of box.
‫You can see if you click here, you will see these example.
‫This is a box box one and box two, so all the content that we see are in form of box.
‫So this board is a box, then this device a box inside that we have two box box B, another box B.
‫So that's how the complete structure is designed.
‫But there are a few other things along with this box.
‫So the text we have added it is our content and there is something like padding.
‫Then we have border.
‫Then we have margin.
‫What are these three important things I understood about?
‫OK, this is the content that we added.
‫But what is this?
‫That's where this whole box model concept coming out of a chair.
‫So let me jump on to Notepad now.
‫So here, let me try to describe things through pen and paper, actually.
‫So you can understand more here we have content, which is one of the most important part.
‫Suppose this is our bag and this is the content that we are displaying on our website.
‫So we have content and then we have padding.
‫And then we have border.
‫And then we have margin.
‫OK, so we have one for you, Doug.
‫You have this next and then suppose we have another bag and let me call this as.
‫Next to.
‫We have to be taxed just like this example.
‫I hope you got the idea of a discord out there inside this, we have to be ducks.
‫Now, if I jump back here, the first thing is content, which is exactly the space that we currently
‫have.
‫This is content and then we have something like border.
‫So if I try to display this here, let me try to select this dog and create a border.
‫If I get my card, you can see this is the border.
‫So that means we have some border if we apply.
‫So there is some border.
‫And let me try to add it here.
‫So we got our content here and then we got our border.
‫All that space between border and this content is known as batting.
‫Pretty simple example.
‫I hope you get this in one go.
‫The space between this content and border is actually padding and the space between one element and
‫this second element is margin.
‫So suppose this is our second element.
‫Let me also being this in blue.
‫Suppose this is our second element here.
‫I'm drawing a border actually and the space between them.
‫This space is actually margin.
‫So content is the content that we had, it can be an image, it can be any type of text.
‫And then parting is the space between content and border.
‫And I hope you got the idea about what is border, it's just an outline and you can see content plus
‫parting, then we get about border and then what is margin space between two different elements?
‫So had we had this element, that means space between two boxes, I should say so.
‫Box one.
‫And walks to.
‫This is the simple information about box theory.
‫That's all.
‫You just need to visualize that everything that we see here is Box.
‫Don't worry, we are going to understand this true code, but make sure you visualize this small part.
‫If I get back here, take this simple example we have this content.
‫Then we have some padding.
‫Then we have this border.
‫And then we have this margin.
‫For example, if I had increased the padding, what will happen this this winning, please this whole
‫space?
‫If I increase this margin bottom here, then this space will increase.
‫So this will be moved down.
‫That's how it is going to work.
‫And this is the perfect diagram.
‫We have some content, we have some padding, we have this quarter and then we have this margin that's
‫on.
‫So content is where our image or text is.
‫Now let's take this example through our day as well as through our done.
‫Our currently whole B is a box.
‫That's why it's taking 100 percent off work.
‫Now, if you jump over to the first part, you'll see some extra space on the left side.
‫This extra spaces default margin by our body tag, if you click on body right now, you will see default
‫margin here, aid for top four right bottom as well as left.
‫So we will understand this more as we move forward.
‫I hope you got the concept of adding margin content as well as border.
‫Now we have tested this border, right?
‫Let's try to add some padding, so I'm going to add padding here itself.
‫So we have our border.
‫Let me try to add space between content and border, so I'm going to add padding here.
‫And I'm going to add binding protein, big cell phone, I'll save this one.
‫Get back here.
‫You can see the space change.
‫What I'm going to do is I'm going to add border on the second one so you can see the difference.
‫See if I jump back here.
‫And headed by Add Border to the second one also.
‫So this is the normal default case, and this is the case where we added fighting, so if you jump head
‫on to the back now, you can see the padding is then, then then and then why?
‫Because we are in big sense now.
‫This is shorthand property.
‫Again, we can individually add four left or top four bottom as well as what we are going to discuss.
‫This don't worry about, but understand the concept here.
‫So this is the batting part we now added batting the green thing that you are currently seeing if I
‫jump on the dispute that you don't see any batting.
‫OK, now we understood about batting.
‫And if I select the speed tag by default, the margin is 16 from the top as well as from the bottom.
‫We can change this.
‫Actually see if I jump ahead.
‫And our margin.
‫Let me out 50 pixels, save this one.
‫Get back here now you can see everything has changed.
‫Why?
‫Because padding and margin is attacks on oil before detection.
‫So we have top direction.
‫We have this right direction than we have bottom in left.
‫Usually, we calculate everything in clockwise direction.
‫You will see the rdl and you can call this as gravel had.
‫This propagates itself as I travel, but this name help you to remember everything that prb.
‫These are the four values that we are going to want PRB and again generally hover over this.
‫We have attached 50 at the top, 50 at the right side, then bottom and the left.
‫So that means our added margin outside of my border.
‫You can see the difference here now.
‫It's increased to 50 percent.
‫So the difference between my box and Box B has a gap of 50 percent.
‫So this is important.
‫Let me try to do one more thing.
‫Jump in and add batting.
‫And Brexit.
‫She came back here, things looks fine as expected.
‫We have our guys some batting.
‫But if I add margin asked 50.
‫I haven't seen it.
‫And if I save this now, can I can?
‫You see, they are sharing margin.
‫Look at this.
‫It's 50 again, this is common space now.
‫What happened is Martin can be overlap.
‫That means if there is some space already, the 50 Pixel is already available.
‫We can utilize it now.
‫What I can do is I can add 60 here.
‫And if I saved this one, get back here now you can see this is 60, but for this one, you can see
‫the end of orange line.
‫It is 50.
‫So that's how this is going to work.
‫My main motive with this particular lecture was to make you understand about these three concepts batting
‫border, as well as margin.
‫They require dedicated lectures for their value.
‫We are going to discuss next.
‫But make sure you understand the basic concept.
‫More students find this difficult.
‫I don't know why, but this is one of my favorite topic because you can customize this space that you
‫want with your boxes.
‫Now I will be continuing this topic in the next one, where we will discuss more about these values,
‫as well as that experiment.
‫Thank you for following, and I see you guys in the next one.