The box model is the way page layouts are organized on the web.
Unlike design tools or Power point, where you can place elements wherever you want on the canvas, on the web and on STUDIO elements are stacked on top of another.
The greatest advantage of the box model is that it allows us to create responsive websites that adapt to different devices and screen sizes.
Below are some characteristics of the box model.
Everything is a box
It is important to note that the term ‘box’ doesn’t only refer to square shapes here. Everything, including images, text, icons & sections are considered boxes in this model.
Grouping boxes: parent & child
Boxes are not only stacked, they can also be inserted in other boxes. This is called “nesting”.
A container box is called “parent box”, a box that is nested in it is its “child”.
When a parent box is moved, its children boxes move with, keeping the same relative position to their parent.
Creating Space
To create space between and inside elements, margin & padding are used.
Margin is the space outside of the box.
Padding is the space inside of the box.
Learn more on margin & padding here.
Positioning & moving boxes
When there is only one box, it can be moved to the left, right, center of each border and the center of the parent box by dragging & dropping.
However, when there is more than one box, they cannot be moved by dragging & dropping. Learn more about how to move boxes using flex box properties in next topic.