Grow your business, income, & life.

Behind-the-scenes training to grow your business and generating income. Strategies and mindsets that work.

CSS3 Tutorial for Beginners: 21 CSS Box Model (Part 2) – Practicing

This is Sasha and thanks for joining me here for another CSS training video and today I want to cover the box model. This is part 2 of the box model. This way it helps you understand more about editing your business website. Let’s take a look at part 2.

We’ve already covered the basics in part 1 of the box model. If you haven’t seen it, make sure you go back and check it out. I have a basic box already set up. Now here’s the thing is normally these are aligned to the left. Now, what happens of you want to center a line.

There’s no real property to let’s just say center or align if you do alignment, you can see that there’s no alignment of center. There’s a vertical-align. There’s a text-align. But even if I do text-align center, watch what happens. I mean, it just kind of aligns the text in the center there. It doesn’t align the box to the middle of the content.

What I want to do is in fact if you take a look at this margin, what you can do is do margin right and then you do auto and margin left and we do auto. Okay? What you can do then is you’ll see if I hit refresh, you can see that this box now is aligned in the center between this and this and we also have width that we wanted right there in 320 pixels. That’s how you get exact and precise alignments with the width.

You could shorthand this which again we’ll talk about here in a little bit but you could do margin something like this let’s say 25 pixels and then auto because now it gives top, right, bottom and left or top, right, bottom, left depending on how you are looking at it. At the top, we have 25 pixels. On the right, we have an auto. On the bottom, we have again 25 pixels. And on the left, we also auto.

This basically creates a very similar kind of concept which you can do some shorthand things with which we’ll talk about in the next video but that’s ultimately how you align these elements within the other elements or within your page. Even if you have let’s say 520 pixels, you can see it’s wider but it’s still aligned in the center and you do that through that margin property by assigning an auto margin.