Let's talk about height dimensions.
So we have this thing called a Document Object Model.
And when we right-click on that box and we select it over here,
we come on down.
We can see that we've got margin,
border padding and the actual size of the element itself.
We can check to see what that sizing is.
So we can select that box.
Let's do const boxes equal to dot box.
And then we could do box dot.
We've had a few different things.
We've had outer width and width.
So if we take a look at the width here,
which is actually a function.
So whenever you see this little curly f here,
that usually means it's a function.
That typically means that you simply forgot your parentheses.
So my box width is currently 100.
And let's go ahead and see if I can pop this out. There we go.
We can also do the box.
Height is also a 100.
We can do the box. Outer width is a 100.
We can also do the box inner width is a 100.
And we're going to see that all three of these things are the same,
but they're actually different.
And this depends on the box model.
And so if we go back here and what I wanna do is add some padding.
A 100 pixels. No, let's not do a 100.
That's a lot.
Let's do 20.
And let's do a margin of 20 pixels as well.
And we're gonna see that this bumps
the element and actually made the element look a little bigger.
So now if I go back up, select my box,
and I could do box dot width.
It's now a 100. That's the inside. The inside is a 100.
And we're going to see if we go over to elements that inside here is 100.
Now let's do box dot, inner width.
It's 140. Well, where do we get 1 fourth from?
If we go back to elements, we can see that there's a padding here.
This is the entire box itself,
the inner width of the box.
So we've got a 100 and then we've got 20 on either side.
So 100101140.
That's where we got a 140 from.
Now we can do the outer width as well,
Box dot odor width.
Now we're looking at the outer width here.
And then outer width has two options here.
So we've got regular outer width,
odor width, and this is the outside here.
Or we can do outer width, true.
And what that's going to do is take all of it, including the margin.
So we've had a hundred one hundred twenty one forty one sixty,
one eighty, and that's where we're getting a 180 from.
Now what I would like you to do for
this particular lesson is don't worry about the width,
inner width or outer width.
What I want you to do is do the same thing with height.
So grab your Box element and then do inner height,
or just height or outer height,
and try it with true in there.
Give that a shot. And try with different sizes.
Make your box of different size.
It doesn't have to be a perfect square either.
And then what I want you to do is I want you to select your entire window,
that is your entire viewport,
and then do width and height.
Now, just as a heads up,
my height is very low just because I am super zoomed in here.
If I wasn't zoomed in, this would be significantly higher than 289.
Go ahead and give this a shot.
These are important when you're working with
positioning things on your page using JavaScript.
So you are going to need to know how these work when you're done that,
let's head on over to the next lesson where we talk about
a new event listener where it checks to see if we're resizing our page at all.