This is Sasha and thanks for joining me here for another CSS training video and today what I’d like to do is share with you the box model or the CSS box model in order to work on your website, make some modifications or changes to your business page so that way you understand what’s happening underneath the surface of your online business. Let’s take a look at the CSS box model so that you understand further how to manipulate these fields.
Everything in your website is a box
If you look on screen right here, what I have is actually the box model and if you’re really looking at it initially CSS or really anything on your website is created out of a box. I know that may seem a little bit elementary but everything is really a box, whether that’s a paragraph, a heading tag and images.
It’s all box based and you’re creating boxes and you’re stacking boxes and you’re aligning boxes and this is really where the un starts to get going because this is how websites are created. You might have a right side panel for a box or left side panel for a box such as a navigation structure and they’re stacked or they’re aligned left or their width is different and ultimately you’re creating little compartments within the page and that’s what creates your website.
Four main parts of the box model
Because everything has a box, it allows you to manipulate these boxes and here when you look at things, every box or every element I should say has these kinds of boxes and has these four main boxes. You have the content box right here. That’s the one that you’ve been seeing.
Then you also have the padding area which is invisible unless you define it or view it. You also have the border element that goes outside of the padding and then finally the margin area. Okay? We’re going to talk about all of these here in just a minute and show you an example so that way you really get the hang of it. But just understand that all those elements, they go in that order. They have the content, the padding, then you get the border and then you get the margin.
--------------------- HTML CODE --------------------------------------- CSS CODE ------------------ p { font-family: arial; font-size: 18px; line-height: 1.65; }Backstageincome : Learn to grow a business and evolve your life! Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch.These are my books and products
Thank you for visiting
Let me share with you this example and that way you kind of understand how it works. I have a few paragraphs set up and what I’m going to do is just include a background of let’s just say, we’ll just name it pink for the time being so that way you could see how things are going. And now, what I’ll do is create this paragraph tag, okay? I have this paragraph tag. We have a line height in here.
What I’m going to do is just do a background of let’s say white and this is the white color and you’ll see that all of these right here now have a background of white and you can see that they’re in a box. It’s now visible to you. You’re able to see those things. Now, you can see there’s no padding right there but there is kind of like a slight little margin right there that you can see and there’s no border.
--------------------- HTML CODE --------------------------------------- CSS CODE ------------------ body {background:pink;} p { font-family: arial; font-size: 18px; line-height: 1.65; background: #fff; }Backstageincome : Learn to grow a business and evolve your life! Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch.These are my books and products
Thank you for visiting
What we can do actually if we go ahead and add a border, let’s just say we’ll add a border of 5 pixels, solid and we’ll do black. Don’t stress too much about this in the meantime. I’m just trying to explain the box model to you and then eventually we’ll cover each one of these in more detail.
You can see there’s a border around that white box that we have or around the element. Ultimately if you didn’t have the pink background right there and you didn’t have it, all you would really see is that border. Okay? In either case I’ve just shown the pink background so you could see the easier view of that box model. Okay? If I go with 2 pixels or 3 pixels border, you could go ahead and make those changes and modifications.
--------------------- HTML CODE --------------------------------------- CSS CODE ------------------ body {background:pink;} p { font-family: arial; font-size: 18px; line-height: 1.65; background: #fff; border: 3px solid #000; }Backstageincome : Learn to grow a business and evolve your life! Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch.These are my books and products
Thank you for visiting
The problem is let’s just say the border is too close or too tight to our text, right? We need a little bit of padding, right? Remember it goes content then padding then border, right? What I could do is add a padding and I’m just going to go let’s say 20 pixels, okay? Typically you use pixels but now you can see there’s a little bit of spacing right there that’s happening all around that box, okay, before you get to even that border.
--------------------- HTML CODE --------------------------------------- CSS CODE ------------------ body {background:pink;} p { font-family: arial; font-size: 18px; line-height: 1.65; background: #fff; border: 3px solid #000; padding: 20px; }Backstageincome : Learn to grow a business and evolve your life! Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch.These are my books and products
Thank you for visiting
It looks pretty good, right? And finally, let’s just say I want to offset it from the left and right. What I could do is add a margin and a margin of let’s say 25 pixels, okay? You can see there’s a top, right, bottom, and left margin, 25 pixels. Now, if you’re wondering why is – wouldn’t this one have 25 and then the one under it have 25 as well making it 50 pixel gap right there? Well, that’s true but there is a thing called border collapsing that happens within CSS.
--------------------- HTML CODE --------------------------------------- CSS CODE ------------------ body {background:pink;} p { font-family: arial; font-size: 18px; line-height: 1.65; background: #fff; border: 3px solid #000; padding: 20px; margin: 25px; }Backstageincome : Learn to grow a business and evolve your life! Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch.These are my books and products
Thank you for visiting
That way these elements in between, they don’t take 50 and either case for the time being just to understand that it’s basically you’re taking 25 in between two elements or in between elements because it collapses the borders or the margins in this case.
In either case, that’s our box model and of course if you change things and you modify things let’s just say you change this to a gray, you can still see things and you can see how it really works. You could go ahead and let’s just say we do a border or just on the top, okay, so you could a top border right there which again we’ll get into more details and ultimately that’s how the box model works.
--------------------- HTML CODE --------------------------------------- CSS CODE ------------------ body {background:pink;} p { font-family: arial; font-size: 18px; line-height: 1.65; background: white; border-top: 3px solid #000; padding: 20px; margin: 25px; }Backstageincome : Learn to grow a business and evolve your life! Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch.These are my books and products
Thank you for visiting
It’s just when you’re looking at things just to understand that you have this initial content which is a box then you have the padding that goes outside of it then you have the border and then beyond that you have the margin.
That’s ultimately how the box model works and, you know, everything is based on a box. It doesn’t matter if you’re looking at the H tags because – the heading tags. If I go ahead and change this to let’s say the H3 tag, you can see that now is the box and if I get rid of this border-top, you can see there it is. It’s in a box. If I go and do let’s say width, I’ll 250 pixels just so you can see, there it is.
--------------------- HTML CODE --------------------------------------- CSS CODE ------------------ body {background:pink;} h3 { font-family: arial; font-size: 18px; line-height: 1.65; background: white; border: 11px solid #000; padding: 80px; margin: 25px; width: 250px; }Backstageincome : Learn to grow a business and evolve your life! Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch.These are my books and products
Thank you for visiting
That’s still a box. Everything is box based. It doesn’t matter if it’s an H element or heading element, a paragraph element and I hope now you see it because if you need a larger margin, let’s just say you go to 45, now you can see the margin between right here is 45, here is 45, here is 45 and actually here is 45 even though there’s nothing that’s right next to it.
If you go ahead and change the padding and you do let’s say padding 80, you can see how it really expands those things out and if I do a border of let’s say 11, you can see how much thicker that goes. In either case that’s the box model.
