EFFICIENT DEV
<< See other exercices

Understand the box model

Learn how to put boxes next to one another

Everything you see on a website is box ! Click on the checkbox below to show all the box on the page 👇🏽
The role of a website integrator is to position all the box aesthetically.
To achieve this result it's important to understand the components of the box one can update.
There are 3 elements to know about the box model :
  • Padding
  • Border
  • Margin

1 - Border

The easiest to understand, it represents the border around your content. To create a border you have to define its width, style and color (more on border)

1. Change element border to "10px dashed blue" in the style.css file

2 - Padding

This represents the spacing between your content and the border.
A click on the padding will count as a click on this element. (more on padding)

1. Change padding to 30px to see the space between content and border get bigger
2. Click on the overlay toggle button to hide/show the green padding overlay

3 - Margin

This represents the space between the border and the surroundings elements.
A click on the margin will not count as a click on this element. (more on margin)

1. Change margin to 30px to see the space between content and border get bigger
2. Click on the overlay toggle button to hide/show the orange margin overlay

4 - More

A click on the margin will not count as a click on this element.

1. Move your cursor over the element and verify the cursor only react when over padding or border
<< See other exercices
Hello, I'm the content
style.css
Loading...
🎉
If you enjoyed this tutorial, share it to other people !


Every week, I publish a new tutorial / section.
Follow me on twitter to be notified when a new section is out (every week)

If you have any question or suggestion, please reach out on twitter also 🤗