Hi. Today we're going to
talk about the box model. And what the box model is,
is really a general concept of CSS that helps you size and place your
element where you want them to go. So, one of the first things we're
gonna talk about is height and width. I know I've already used this a little
bit in some of my other lectures, but I wanted to be very
specific in how it works. And one of the first things you
need to know is that the height and width of any inline element
is the content itself. So, if you have a link, the height and width of that link is just the text
of the clickable part of the link. Elements that are not inline, things that
are block, inline block, things like that, they can take height and width properties,
and we saw this in the Display lecture. So any time you have something that's
inline, if you give it a height and a width, the browser just ignores it. Anything else, the browser goes great,
I can go ahead and change that for you. Some of the other things we want to
think about then, when we have elements, is how they fit on the screen. One of the easiest ways for you to strategically place things on
your page is to put borders around them. Even if you don't want those borders
later in your final product, I find it's very helpful to have this idea
of how much space an element is taking up. So any element can have a border
around it whether its inline, or block, or inline block. And those border properties specify
what style border you want, what width of border and what color. They're pretty straightforward. The border style is the only
one that must be specified. If you don't specify a color, or
you don't specify a width, no problem. It'll default to black and
probably one pixel. But you have to decide what
kind of style you want. So, in this case, I've said, for
all my divs, I want them to have a solid one pixel border around them, and
I can't tell you what color that is, cuz I'm not quite that geeky yet,
but I'd guess something like blue. The border style that you wanna specify,
while most people always use solid, there's a lot of different styles. You can use dotted, dashed, grooved,
ridged, hidden, inset, outset. There's a lot of different
things you can do, and it's really kind of a stylistic
difference on your part. I don't really pay much attention to them
cuz I've always just used solid myself. Once you've decided what kind of style you
want, you can specify the width and color. So when it comes time to set the width,
if you decide to, is you can set it in a number of pixels or you can use
the key words, thin, medium, or large. When it comes time to do the color, you can do the same thing
we've been doing all along. You can just use the name,
such as blue, the RGB value, the hex value, or just so
you know, it's also transparent. So it can just take the color
of whatever's underneath it. So when it comes time for you to specify
how big you want your border to go, you can specify in four different ways. In the first example,
you just give it one number. In this case, three pixels. And what it's going to do, is it's going to put a three pixel border
around the entire element just like this. If you decide to give it two values, is
it's going to set a three pixel border on the top and the bottom, and a ten pixel
border on the left and the right. This is a really common way to set
things up when you're doing borders and other properties,
because it's a really nice shorthand that's still very simple to understand and
read. If you give it three values,
it's a little bit trickier, and I always stumble over what it is, so I'm gonna
pop the picture up just to make sure. The first value is always the top. You want your top border to be 3 pixels. The 10 pixels is for the left and right,
and the 20 pixels is for the bottom. The last one is when you give four values,
and when you give four values, that basically means top,
right, bottom, left. And that's going to set the border
to four different values. So most people either use the one value, the four values, and
a few people use the two values as well. Mostly, and one of the reasons I show this
to you is, it can be really intimidating, and you're wondering what people
are doing when they're going on. This is what they're doing. They're using shorthands so
that they don't have to have border right, border left, border top, border bottom. Margin is basically that space
that's outside of your border. It's between, when I say you and
your neighbor, or what I should really say is between
the element, and the element's neighbor. So it gives you that elbow room where
you don't want anybody touching you. With margins,
whenever you give it a positive margin, you're basically saying,
move your element to the right or down. If you give it a negative margin, you're actually having it
move closer to the neighbor. You are having it move left or upward. Padding is very similar
in concept to margin, but instead this space is between
the element and its border. It's giving it a little
bit of extra space inside. You might almost think of it as
squishing the text in some cases. In the same way,
whenever you have positive values for padding, you're moving it
outward from the element. You're giving it more space. If you give it a negative padding, you're
actually moving the border close to or maybe even on top of the elements
that are next to it. So with margin and padding, all you're
going to do is give a numerical value. You're gonna give it something
like 3 pixels or 10%. You don't give it any type of color. It's always gonna be transparent. The padding is always gonna be the same
color as the element, and the margin's always gonna be the same color of
the parent, probably the body of the page. They, just like the border,
can be defined in that one to four values. So if you put margin three pixels, it will
be a three pixel margin around everything. If you say padding, ten pixels,
five pixels, you'll have top, bottom, left and right. So let me show you a quick picture
of kind of what I'm talking about. In this case,
here is my text is my actual element. I've said this is what I want to go on. The blue is the border around my element. The yellow is the padding. It's that space between my text and the
border, and that orange is the margin, and what you're saying is,
don't put me near anything else. Give me this much space around myself. So, it might move your paragraphs down. It might move your divs down and over. So, just practice this. And as you play with it more and more, it'll make more sense which one's
a margin and which one's the padding. One of the things you need to understand
when you're doing padding and border and margin, and all these things is
that in HTML says, your height and your width is additive. And so what that means is if you decide
that you want the width of your element to be 200 pixels,
you probably need to take into account how big all those other aspects and
properties are. So, in this case, part of the width
is the margin, plus the border, plus the padding,
plus the actual element with itself. And so it all really adds up to
get what we consider the actual width of your element. And this is gonna matter when you're
looking at your page and you're designing it and trying to decide how much space
you want each element to take up. So if we look at this example right
here where I have the width is 100px, the padding is 10px,
the margin is 5px and the border is 1px. I'm hoping that right now,
you're doing the math in your head, and I promise not to give much more math than
this, but you're doing it to figure out how much width does this element,
does this div, actually need on the page. And in this case the width is 132 pixels. The 100, plus 10, plus five, plus one,
plus one, plus five, plus ten. It all adds up. The height, in the same way, is your
height plus the top and bottom padding, top and bottom margin, and
the top and bottom border. All right, so when we talk about margin, I just wanted to throw this
slide in even though it doesn't mesh with a lot of the other things
we've been necessary talking about. But it's because margin
is very important for when you want to center
elements on a page. When we want to center text,
we could just use text align center, and everything looked really good. But when you want to center elements,
it's a little bit more difficult. And so the default way to do this is
to use the command margin zero auto. So if you remember, that first zero,
that stands for top and bottom, and so it's going to not
really care about that. The auto is what puts it left and right. Now this is only going to work if
the element happens to be display:block, if the element is not floating, is
the element has a width that's not auto, which means that you set it. And this last one is if the element
is not fixed or absolute position. Now I haven't covered position yet. And so the good news is, since I haven't
covered it, you probably haven't messed with it, and you don't have
to worry about these two things. But as you try to send your elements,
come back to this slide if you need to, and check these off to make sure
that all these properties fit. And that's the best way to
center things right now. Finally, when we talk about this I
want to add one more option, and that's called box-sizing. And what box-sizing does is it takes some
of the math out of that additive height and additive width. What your options are is you can have
content-box, so box-sizing content-box, and that's just your default additive. You're gonna have to remember
how much space you're using. The next one is called border-box. And border-box actually takes the width,
the content, the padding, and the border all into consideration. So, if you say you want
the width to be 200 pixels, it's not going to actually
make the element 200 pixels. It's gonna make it 200 pixels
minus the padding and border. One of the last things to remember is
that we'll take into account padding and border, it won't take into account margin. So finally, one of the things I'm going to be showing
you in this example in just a second, is different ways you can set the height
and width of different elements. And there's two common ways to do this. The first one is called absolute, and that's when you set an element
to a specific size. You say I want it to be so many pixels,
or so many millimeters, or so many centimeters. Pixels is a very common way to set sizes. The other type of measurement
is what I call fluid, and it sets the size relative to surrounding
elements or the parent elements. So you can use things such as percent. You can use vw, which stands for viewport width, vh which stands for
viewport height. You can even use things such as em and
rem, which aren't commonly used, but they actually set the size
relative to its parents. So let's go ahead and
move to my example so we can play with this just a little bit. It's not gonna be enough to demonstrate
everything that we can do, but hopefully it'll get you started. What I have here is
a very simple HTML file where I have a left side and right side. But as you can see, they're not to
the left and the right right now. They're just on top of each other. So the first thing I wanna know is,
can you put these divs next to each other? We're gonna have to use a kind of
combination of display, and height, and width, and padding. So let's go ahead and do that. So over here in my CSS file, right away you can see this kind of
the background things I've done. Now, when you want things to be next to
each other, you have to give them a width, because right now they take up 100%. One option would be for you to go ahead
and set it to some sort of pixels. And say maybe 200 pixels and
200 pixels, and see what would happen, see if it works out. The problem with doing that, as I
uncomment my code here, is that as people go on different browser sizes, your
numbers might be too big or too small. So what I've done here is I went ahead and
I set my width to 48%. Now doing that is really great, and
I'm going to come out of this one line for just a second, because most people
get that idea that you want to set the width to something smaller. What they forget, is that even
though they're only taking up 48%, in fact I'll even just make
it something really small. 20%, they're not going next to each other. So you need to remember that you want
to use those fluid measurements. So let's go back here,
I'm going to put it back to 40%. Even if you make it really skinny,
until you tell the browser, oh, I know this is blocked but
I'm going to change it to in-line block, it'll never let block elements
be next to each other. So that's why you have to remember
to do both of those elements. So let's go ahead and save and reload. And so you can see that I've gone
ahead and I've done my width. I've done my display block. I've got my padding. I've got my border, and
I've got some margin. So last thing I'm gonna do, just to end
this up to show you what's going on, is I'm gonna go ahead and change this to 50%, because this is
a really common mistake people make. They say oh,
I want two things next to each other. So I'm gonna make them each 50%. Don't forget when you do that, it doesn't work because that's 50%
before you put the border into account. So make sure that you're playing with all
these things, that you're playing with the margin, you're playing with the
padding, you're playing with the border. Cuz that's how you're gonna get things to
work, by tweaking, tweaking, tweaking. So let's go ahead and review. When it comes time for
you to start implementing all these ideas, your box model with your padding,
content, margin, etc., you really wanna design sketches
on paper first, cuz it's really hard to shove things in after you've already
come up with an outline, all right? So design first, code second. The second thing you might
wanna do is use the box model to reduce the complexity of your code. Or at least the complexity of
your math trying to figure out what things fit where. Finally, no matter what you do, you need to remember that margin
always has to be considered. It can be tricky when you first start
trying to put your page together, and getting things to go exactly
where you want them to go, and we haven't even talked about positioning
yet, which would be even another element. So for right now,
practice these things in small ways. Use Inspect Element to play with it and
not have to change your code so much. Until you get things looking just
the way you want them to look. And don't worry,
we're all making mistakes. We're all doing this together. But I think your page is
hopefully getting closer and closer to something that you would
really want to put out on the web. Good job.