CSS Box Model - Newbie’s Perspective

It can be comfortably said that if you don't understand the Box Model, then you cannot write proper CSS.

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.

Twitter | LinkedIn | Github

Thank You For Your Time.

Blog