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.