Depending on your level of experience in web development, you may or may not have heard about the Box Model. It is a fundamental concept in CSS that will shape how you use CSS to build layouts.
We’ll illustrate this model with a relatable situation.
Your sister’s birthday is next Saturday. You plan on getting her the iPhone 13 you know she so wants. However, you want it to be a surprise. So after buying the phone, you take it out of its box and put it into a bigger one; you don’t want her to guess your gift right away.
There is one problem. The screen might break if you allow the phone to wobble about in the box; or if someone drops it. So you put some stuffing around the phone in the box to soften the blow if it falls.
You bring your gift to where all the others are. But you don’t want yours to blend in with the others. So you put some distance between yours and the others.
Now back to CSS.
The main idea of the Box Model is that every element on an HTML page is a box🎁. Where depending on how fragile the item is, you put a lot of stuffing (padding) around it or no stuffing at all. And depending on how much you want it to stand out, you put some distance between your gift and others around it.
In CSS,
- The content of an element is the item inside the box.
- The padding of an element is the stuffing around the item.
- The border is the walls of the gift box.
- The margin is the space between the gift box and other gifts boxes.
That’s it. That’s the CSS box model.
Let me know your thoughts.
Twitter: @ammduncan
LinkedIn: Ammiel Yawson