Thread by @codingyuri

CSS box model is fucking hard

here's a brief explanation for dummies like me:

A thread🧵

#100Devs 💪

WTF is CSS box model?

basically, just a term to talk about design and layout.

everything on a webpage is a fucking box.

the CSS box model is a box around every HTML element. it consists of the actual content, padding, border, and margin.

from the inside out, the order of the box property is content, padding, border, and margin.

on the image below:
- the actual content is highlighted in blue
- padding is light green
- border is highlighted the darkest color
- margin is orange

there's two types of box models, standard and alternative box model

standard box model: when height and width are specified, it only applies to the CONTENT ITSELF

values of padding and border are not included, their values are added on top of the specified height and width

👇

in this example, the height and width only apply to the CONTENT inside of the <div>

we have an additional 30px padding and 5px borders on all 4 sides.

this means that the height and width is 270px (30px + 30px + 5px + 5px), not 200px because padding and border are added

this is very inconvenient because you gotta calculate the total size of the box by adding paddings & border shit

this is why we came out with the alternative box model, it fixes this issue. you don't gotta calculate shit anymore😂

👇

alternative box model: when height and width are specified, it applies to the content, padding, and border

basically, the size of the whole box is the specified width and height, INCLUDING padding and border

you achieve this by adding `box-sizing: border-box;` to your CSS

👇

the example below shows the exact same code as before, except that we added `box-sizing: border-box;`

since the box's size is the specified height and width, the size of the actual content shrinks in order to fit the padding and border within the specified height and width.

`box-sizing: border-box;` made the whole <div> height and width 200px

this means the the height and width size of the actual CONTENT is 130px (200px - 30px - 30px - 5px - 5px)

basically, whole size of the box, minus padding on both sides, minus border on both sides

this is different for margins though...

you would think that when you have 2 elements side by side, each with specified margins, they would add up just like padding and border...creating a very large margin

but this is not true.

margins collapse to one, forming a single margin between both elements

CSS chooses the margin with the larger value out of the two.

on the example below, `.box2` wins. there's a 40px margin between both boxes, not 60px

when to use margin or padding?

use MARGIN to create space between 2 ELEMENTS

use PADDING to create more space between the CONTENTS of an element and its BORDER

that's it for today! thank you so much for making it through this long ass post😆

today i re-learned the CSS box model, so i thought making this thread would be good practice/active recall to solidify my knowledge

check me out to follow my journey!!❤️ @codingyuri