Lecture 19, Part 1: The Box Model

In HTML every element is considered a box.

However, there's more to that box than just the content that the element wraps

around.

Let's take a quick look at a simple diagram.

Besides their [INAUDIBLE] content, each box consists of padding,

border as well as margins.

The box model refers to the components that make up an HTML box

as well as the rules that govern how these box components affect the layout

as well as how width and height of the box are calculated.

Let's jump into the code and take a look at some examples.

Okay, so here I am in subline text and

I'm looking at the file called box-model-before.html.

And it's located in the examples Lecture19 folder.

Let's quickly examine the HTML structure of this document.

It's actually pretty simple.

It just has one h1 here.

Has a div that has an ID box and inside of that div there is another

div with an ID content and has some Loren ipsum, basically some dummy text in it.

In addition to that I colored the box itself with a background color blue and

the content which is the div right here.

This content.

I colored it with this color which is basically light green.

And just so we have some more interesting colors in the background

I colored the body to be gray.

Okay, so here is the representation of our page in the browser.

And since div is a block level element,

it tries to fill in the entire parent in terms of width.

So it's trying to fill up the entire width here in the browser.

But there's something strange going on if you take a look.

There's some space that's gone in here right before Lorem and

here at the end of our content beginning and there's spacing going on.

So let's take a look at the chrome developer tools real quick and

figure out what that space is about.

Okay so we'll go ahead and choose the box, that's our box.

And we'll take a look as to what's going on.

There doesn't seem to be any spacing that's set on the box itself.

Well how about the body itself in the body tag?

Go and here we go.

See we'd realized that the body tag here has a margin all around of eight pixels.

Now where is that eight pixel coming from?

Or if we take a look here, it's telling you where it's coming from.

It's coming from the user agent style.

Style sheet.

Which means it's the browser itself.

It's the default browser styles.

So that's actually pretty common that the browsers do stuff like that.

And what we're going to do is in order for

it not to affect what we're doing we're going to reset it.

And it actually resets on the web out there,

plenty of resets on the web how to reset default browser setting.

So we'll go ahead and do margin 0 and

we'll also do padding 0 so we won't be affected by any of that.

And when we do that and we save and refresh, you see that now our content is

flush with the actual borders of the browser window.

Okay, so moving on.

So we have our content.

And you can see the context is green.

Now we're not seeing the background of the box the content is actually sitting in

because we would have seen something blue in the background and always see green.

And that is because the inner box, the inner content div

is covering up the outer one completely because they are the same size.

They both try to fill up their parent which is in this case the body tag.

Both try to fill it up all the way.

And since this one basically sit it on top or inside of this one,

it's covering up the blue background.

Let's go ahead and set some padding on our box.

Let's do padding, and we'll do 10px top.

10px right, 10px bottom, and 10px left.

Now we set that and by the way, there's obviously a shortcut for this.

You could actually remove all this 10px right here and

that would mean exactly the same thing and I let you actually look up as to

all the different shortcuts that you could take, but I'll leave this here for now.

So point is, it's always goes top, right,

bottom, left and let's go ahead and save that and refresh the browser.

And voila, now we've seen the padding.

And what the padding is doing is basically giving some padding around our content and

our content being this div tag right here with the content text, is the one that's

being kind of squeezed all around and the padding is showing up all around and

now you can see the blue because that's the background color of our box.

Okay so next, let's give our box some border.

Let's go ahead and say border, and

we'll give that border that's going to be 3px thick.

And it's going to be solid as opposed to dashed or something like that.

And there's other options here you're welcome to look up.

And we want to give it the color black.

Okay. When we save that, and

when we refresh the browser, you could see that the border showed up.

And in fact, let's make it a little bit thicker.

Let's make it a five pixels border.

And let's make it like that.

Okay and then last but not least, let's give it some margins as well.

Let's go to margin and let's go ahead and use the shortcut notation which is

giving you 40 pixels which means I'm saying I want 40 pixels all around.

So top, right, bottom, and left.

So if I go ahead and refresh that.

You could see now there's 40 pixels on every side.

And, well, you could see it on the bottom, per say, and

you can't really necessarily see it here.

But there's 40 pixels on every side.

Okay. Well, up until now,

we've sort of let the content and some of our margins, and so on dictate

how big the actual box is or what about if we actually set this width our self.

Let's set the width to be let's say 300 pixels and we save and

refresh the box became smaller but let's go ahead and examine that box.

Let's click on the inside Chrome Developer tools, now let's take a look.

So it's showing us that our box is in fact 300 pixels wide and

since we didn't restrain our height, it went ahead and wrapped around the text.

And basically the height will adjust unless we restrain it.

A manually by specifying the height,

it will adjust to however much it needs to fit.

So if we make it a little bit small, let's make it let's say 100 pixels,

we'll refresh you'll see the height will become a little bit bigger, the height

will become 72, because now we squeezed it enough that extra lines got added.

So now the content width is 100 but the height is larger.

Let's go ahead and put it back to 300 and refresh.

And now if you look at this breakdown

we come to our first pretty interesting point.

But first of all let's go through all the components.

Here this one is the pure content right here that I'm mousing over right here.

And then if I go up a little bit, it'll highlight for

me in the browser the padding that's going on there.

And if I highlight, if I go out a little bit more, I'll go straight up to

the border, right, and if you can't really see the margins if you roll over to

the margin side voila now you see what the margins are gone and even though to

the right side showing you a little bit more than really margin is going on.

But the 40 pixels all around still stands.

Now what's interesting to find is well how big is this

box exactly as we going to start putting more and more boxes right.

We going to start making layouts of different HTML components and

to get our UI just right, we need to find out how big is each box.

Well, we sort of specified that we want the box to be 300 pixels wide.

The problem is that it's not really 300 pixels wide.

Let's take a look.

If we take a look here it says 300 pixels wide, but we're forgetting there's

a border around it or the padding around it, and the padding is 10 pixels on one

side And ten pixels on the other side but that's not all, there's also a border

around it as well that is 5 pixels wide and 5 pixels wide on this side.

So really, it's 300 plus 10 plus 10 that's 20, 320, plus 5 plus 5 that's 330.

So if you look at the actual visible border of this box, this box,

this distance is not actually 300.

This distance is 330.

And the interesting part is, or kind of annoying part,

is that, depending on what border and padding you set, this width will change.

So let's take a look.

Let's say if I make the border something really crazy like 20 pixels.

So go ahead and refresh.

Now the border is 20 pixels so now my box end all the way there.

And if I make the padding even bigger,

let's say I make the padding this one is the right so I make the padding 30 and

on the left I make the padding 30 as well, and I take a look at the box.

Take a look at how it's going to whoa, it became bigger again.

So even though we said I want the width of the box to be 300,

it turns out that we aren't really setting the width of the box,

we're actually setting the width of the content.

And that's this piece right here in the green.

Well it turns out for layouts, and just in general sanity this is kind of annoying.

You really want to change that and CSS3 actually did change that,

it turns out that by default, the box sizing is actually a property of

every HTML element and by default it's actually set to content box,

which means when you specify it's height and width,

you're specifying the height and width of the content box, not the entire thing.

Well CSS 3 came out with a new value for that property,

and that's called border-box.

Let's go ahead and set that right here.

We'll say box-sizing, and we'll say border-box.

And when we refresh let's take a look, look at that, it became smaller.

So now, if you take a look at the breakdown,

you could see that even though it was specified the width would be 300.

That width is guaranteed to be the width of this box right here

from the edge of this border.

To the edge of this border.

So if you take a look here, 200 plus 30 plus 30,

that's 260, plus 20 plus 20, that's another 40, that's 300.

And if we change it back to content-box,

which is the default, it will jump back to its original size.

But the truth of the matter is, all the modern frameworks like Bootstrap and

others use box, border box as its sizing mode,

and as you plan and work with your layouts this is the same choice to make.

So, make sure you always stay with a box sizing of border box.

Explore Related Videos

面向 Web 开发者的 HTML、CSS 与 Javascript 课程

與講師見面

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。