Pretty cool right?
Haha, I just noticed I spelled "example" wrong.
"ExceptMolly".
Anyway.
You know what I mean.
Anyway, let's continue.
i just wanted to show you that very very quick example.
You might be thinking, what is the box model?
Well, when laying out a document, the browser's rendering engine represents each element as a rectangular
box according to the standard CSS basic box model.
And from this, CSS determines the size, position and properties of these boxes.
I keep talking about boxes, but how does that work?
Well, every box is composed of four parts or areas, and these areas or parts are defined by their
respective edges.
What do I mean?
Well, firstly, let's start off at the one edge, the one part, and this is the content area.
This is bounded by the content edge, and it contains the real content of your element, such as the actual
text or the image or the video player.
Its dimensions are the content width and the content height.
That's the content.
That's one area.
What's another area?
That's right.
Padding.
What's another area?
Border.
You've got it.
You probably know these all already, by the way.
The final is what?
Margin.
That's right.
So there you go.
Every box is made up of these four parts.
Have you got it?
Pretty intuitive, right?
And as I mentioned, that content area in the middle contains the real content of the element.
And yes, we can affect its sizing with the width, min-width, max-width, etc etc
properties.
It's very, very easy, but this will target the content area itself, not necessarily the padding,
border or margin.
Remember that.
So how does this box sizing property work and what is the default?
Well, there are two values it can take.
We've got the content box, and this is the default.
And when the content box is set, what does that mean?
Well, it just means if you set an element width to 100 pixels, the elements content box will be 100
pixels wide.
This means that if you add any width of a border or padding, that's going to be added to the final
rendered width, making the element wider than 100 pixels.
So it's kind of counterintuitive.
You might want your div tag to be 100 pixels, but once you add padding and margin, it will be more.
So the good news is to get around this we can set the box sizing property to border-box and this just
means the browser is going to account for any border and padding in the values that you specify in the
width and height.
For example, if you set an element width to 100 pixels, that 100 pixels will include any border or
padding you've added, and the content box will shrink to absorb that extra width.
And this makes it very much easier to size your elements and widgets.
Pretty straightforward, right?
I hope it's making sense.
So just remember, this box-sizing property can be very useful for you when you're styling your form.
But it's not to say that you never want to set your box sizing to content-box. When you're using position
relative or position absolute
for example, sometimes it's nice to use box-sizing of content-box because it allows the positioning
values to be relative to the content and independent of changes to border and padding, which is sometimes
desirable. When it comes to dev, there's not one rule that fits all.
You kind of have to just approach each problem as unique.
Yes, mostly we're going to be setting the border sizing to border-box, but not always.
Woo hoo!
Well done for getting through this.
I hope you're having a lot of fun.
I'm just giving you a little tips along the way
when it comes to CSS. I'm having a lot of fun, but I want us to now talk a little bit about pseudo
classes in the upcoming lectures.
I'll see you now.