It can be comfortably said that if you don't understand the Box Model, then you cannot write proper CSS.
Definition
Code
Final Code
Conclusion
Have you ever seen yourself writing styles for margin and padding even though you are sure you don't need both styles?
I have done so too just like the programmer in the opening image. Come together let's laugh at each other here please
NOTICE that you are writing unnecessary CSS making your code a little more difficult to read and that extra CSS can hunt you in the future as it may have an effect you didn't intend it to have.
Well, that's alright. We are about to change all that as we will be learning how exactly the margin and padding are related.
Definition
In a layman's term, Box Model is the relationship between a HTML element and the spaces around - padding, border, margin.
Padding is the space that surrounds a given HTML element
Border is the space that surrounds the padding
Margin is the space that surrounds the border
In a nutshell, we can say that the padding houses the HTML element, the border houses the padding and the margin houses the border. The image below illustrates it all:
Now, let's translate the diagram into code, enough of stories (theory).
Code
- Please get your starter code here by cloning the repo.
If you don't want to or don't know how to use git, You can create a new html file and copy the following code into the file.
<!DOCTYPE html>
<html>
<head>
<title>Box Model Tutorial</title>
<style>
</style>
</head>
<body>
<img src="https://www.w3schools.com/howto/img_avatar2.png" />
</body>
</html>
- Load the file in a browser and you should get the following result
- Notice that the image came with a default space around it. That is the default margin. Let's remove it. Clone here or copy the following CSS into the
style
tag of your HTML file
body{
margin: 0;
}
- Run it in your browser. This is my result:
Now let's get down to the day's business
- Add a border with the following code or clone here
img{
border: 5px solid red;
}
- Run it in your browser. This is my result:
- Add Padding with the following code or clone here
img{
border: 5px solid red;
padding: 20px;
}
- Run it in your browser. This is my result:
- Add Margin with the following code or clone here
img{
border: 5px solid red;
padding: 20px;
margin: 20px;
}
- Run it in your browser. This is my result:
Final Code
EBEREGIT / box-model-tutorial
teaching of basic CSS - box mode.
You can get the final code here or copy the code below:
<!DOCTYPE html>
<html>
<head>
<title>Box Model Tutorial</title>
<style>
body{
margin: 0;
}
img{
border: 5px solid red;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<img src="https://www.w3schools.com/howto/img_avatar2.png" />
</body>
</html>
Site is live here - https://eberegit.github.io/box-model-tutorial/
YESSSS!!! We did it! We made it!
Conclusion
We have been able to see the difference between margin and padding. We also saw how they are related. Once you understand this, moving elements around the page, will be so easy.
In all, use padding when you want to move an element within it's container or axis and use margin when you intend to move an element away from it's axis or to create space between elements.
If you have questions, comments or suggestions, please drop them in the comment section.
You can also follow me and message me on social media platforms.
Thank You For Your Time.
Top comments (2)
Thanks for the explanation
Welcome danielskiala and thank you for taking your time to read through 😊