In this video we're going to take a closer look at the box object model and understand how we can use
it to position a single element by itself.
If you've ever worked with web development like I mentioned a lot of this box object model is going
to be pretty darn familiar.
So the box object model we take a look at one single piece of content or one single element.
This might be like a piece of text or a view or maybe an image or just about anything else.
The box object model refers to some positioning or some spacing that we place around that single piece
of content with the box object model we have three layers running out from that piece of content.
The first layer or a kind of shell is referred to as padding.
We then have some amount of space for a border and then some amount of space that we referred to as
our margin by default.
For all of our primitive elements we always have a padding of 0 a border of 0 and a margin of 0 as well.
We can make use of some different styling properties to adjust the width of each of these different
layers.
LIM So exactly how.
The first thing we'll do is take a look at our piece of content and decide what side we want to add
some spacing into will then set up a new style property inside of our style sheet and adjust the appropriate
property name so for some piece of content if we want to add some padding above it lad on a property
of padding top.
If we want to add in some border on top we would use border top with infra for margin margin top.
We have very similarly named rules for all the three other sides as well.
So for example padding bottom margin bottom and also margin left border left with padding left and so
on.
Same thing for the right hand side as well.
Now very frequently we do not only want to add in some spacing to just one side at a time.
Instead it's very common for us to want to add in some spacing to multiple different sides.
So to do so we can use some shortcut properties these shortcuts right here.
Our other property names so we can use to essentially assign margin to say all sides of some piece of
content or maybe just on top and bottom or just left and right.
Same thing for padding as well.
And we can also set a border width on all sides using border width so now we've seen some these different
rules.
Let's flip back over to our editor and start playing around with them just a little bit okay.
So back inside my box screen I'm going to find my style's object inside of here.
I'm going to add in two new styling properties or two new styling objects.
So I'll say that I'm going to have a view style I'm going to apply this as you might guess to my view
element right here.
And I'm just going to give it a little border so we can see the entire extents of that view element.
So we'll do a border width of one and a border color of black I'll apply that to my view element with
style is styles not view style.
And then I'll do another style object down here as well.
They'll call textile but this one I will also set up a little bit of a border as well.
They'll do a border with of one and a border color.
But this time I'm going to do red.
Like so then all my text element I'll do style is styles dot text style.
Let's save this and see what we got.
So I'll go to my box demo.
And there we go.
So it's kind of hard to see but we actually have a black outline and then inside of that is a red outline.
So as you can very easily guess the black outline is our view element.
We might even try adding a little bit more border with to it just to get to show all of it more easily.
So I'll change it to 3 I'll save that.
And yeah there we go now it's all a bit easier to see.
So right now our text element has exactly zero margin.
It has a one border in it technically has zero padding as well.
You might notice that there's a lot of extra space to the right hand side of our piece of text.
We'll talk about why all that extra space is right there and just a moment.
So now we can start to play around with some additional styles on our text element and we're going to
see some additional spacing appear on our four different sides of that piece of content.
So to get started let's try adding in some margin above and below that piece of content to do so we
can either set a margin top in the margin bottom or we could use one of our shortcuts.
In this case margin vertical that allows in some margin on the top and bottom of that element.
So on my textile I'll put in a margin vertical of about 20 I'll save it go back to my box demo and now
we can very easily see that there's some space above and below we can do the same thing for margin horizontal
if we'll do 20 there as well.
I'll save once again and yet we get some spacing in the left and right at this point we now have some
margin vertical and horizontal and they're both identical so optionally we might decide to just condense
this down to be a margin of 20 which will apply an equal amount of margin on all four sides.
So I'll save that and we have the exact same thing.
Now we can do something very similar with padding as well or even obviously our border with Let's try
in this case adjusting our border with on the textile I'll go to a border width of 10 and now we're
going to get a really thick border around that piece of Texas.
We could do the same thing with padding as well but I bet you can guess how that's going to work.
OK.
So as you can tell how this kind of box object model stuff not really the worst thing in the world.
Understanding how to set these different widths in these different properties is really easy but where
things start to get a little bit more complicated is understanding how to use it to actually achieve
some complicated layout.
So we're going to eventually take a look at a couple of examples that's going to combine that box object
model along with these two other systems to get some desired layout.
Let's take a quick pause right here.
When we come back the next video we're gonna start to take a look at the Flex box model as well.