Padding, Margins, borders oh my! It can strike fear in the heart of a back-end dev who "doesn't do front-end" during an interview or make front-end devs teary-eyed with excitement....yes folks we're talking about the infamous box model DA DA DUUUUUMMMMM!!!!
Look as how scary that thing looks! I wouldn't wanna be caught in a dark alley with it. I mean, that would be extremely confusing and terrifying. How did it get out of the computer? Out of all the things it could be doing in the real world, why did come to attack me?
Either way, fear not friends we're going to break it down right now. Ready? Here we goez.
I know it's scary but I have to ask you to look at that pic of the box model again. Be one with the model. Understand it. Love it. Lick it. J/k...j/k...(Disclaimer: I am not responsible for warranty issues caused by overzealous codewardbound fans who literally licked their screens.)
All the elements you define have their own "box" surrounding it. This "box" is made up of 4 things: content, padding, border and margin. Being a developer you have the POWAH! to enslave change the value of each of these properties in CSS in order to make them smaller or larger.
Notice the content area in the middle of the picture. That's where the element and content goes. In example above the content could be something like:
<p>The quick brown fox jumps over the lazy dog</p>
Next comes the padding area, then the border area and last, that crazy margin area. THe amount of space your element takes up on the viewport/screen is determined by the summation of these 4 areas - Note: the margin and padding are normally invisible.
So now that we know where these areas are and what they look like, let's go ahead and mess with their values. Since these are styling changes we'll have to define these values in our CSS files. 'Member HTML is for content and CSS is for styling. They'll be a quiz. So our CSS looks like:
The total width that element takes up on the page would be the content width + 20 + 20 (for both sides of the padding) + 5 + 5 (for both sides of the border) = content width + 50px. I know what you're thinking. "Hey! You didn't include the margin! What is it chopped liver? I happen to love margin. Some of my best friends are margins. I would marry a margin."
Ok, it got alil weird and TMI at the end there but it's a valid point none the less. Turns out we do not include margin when we are calculating the width of an element since margin only controls the space between elements and not the element itself.
You did it! You now know the box model and how to calculate the width of an element on the page. Feel free to celebrate...
Now I was going to break this into two posts but I said "what the hey", I actually don't know what that means but if you feel satisfied with your boxy knowledge thus far then stop here else, forge on friend.
There's also an issue of the width you define vs. calculated width. Turns out when you manually set the width property on a selector in your css file, you're affecting only the content width and not the full width of the element. So any additional borders or padding is added after the fact, this is called the calculated width.
So if we do alil something like this:
The new calculated width = 40px (for the content width) + 20px + 20px + 5px + 5px = 90px. This calculated width is now the visible width of the element on the viewport/screen. So you have to add that width property value plus the border plus the padding to the get the total visible width. Might sound a bit wacky to a few of youz.
Thankfully, there's a way to override this confusing state of affairs using the box-sizing property. With box-sizing you can set what YOU and only you consider to be the "box" in the box model.
There's three values for the box-sizing property:
content-box: This is the default box model where the width property includes only the content's width.
padding-box: Here the width property includes the content + padding.
border-box: Here's where the width property is, get this, the content + padding + border. What the what?!
The decision, to use each of these should based on what width you would like the browser to figure out for you. If you know you want your content to be a specific size no matter what and the browser will add on the padding and border you define, then use content-box. If you know you want the total visible width of the element to be a specific size and you want the browser to calculate the content width by subtracting the padding and border, then use border-box. (Stay away from padding box for now, it doesn't have much browser support but I'm rooting for ya buddy!)
So here's some code for box-sizing. Have fun folks!
Title credits: Role Model - Eminem
