DEV Community

loading...
Cover image for CSS Box Model - Newbie’s Perspective

CSS Box Model - Newbie’s Perspective

ebereplenty profile image NJOKU SAMSON EBERE ・3 min read

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

Alt Text

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:

Alt Text

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>

Enter fullscreen mode Exit fullscreen mode
  • Load the file in a browser and you should get the following result

Alt Text

  • 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;
   }
Enter fullscreen mode Exit fullscreen mode
  • Run it in your browser. This is my result:

Alt Text

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;
  }
Enter fullscreen mode Exit fullscreen mode
  • Run it in your browser. This is my result:

Alt Text

  • Add Padding with the following code or clone here
  img{
    border: 5px solid red;
    padding: 20px;
  }
Enter fullscreen mode Exit fullscreen mode
  • Run it in your browser. This is my result:

Alt Text

  • Add Margin with the following code or clone here
  img{
    border: 5px solid red;
    padding: 20px;
    margin: 20px;
  }
Enter fullscreen mode Exit fullscreen mode
  • Run it in your browser. This is my result:

Alt Text

Final Code

GitHub logo 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>

Enter fullscreen mode Exit fullscreen mode

YESSSS!!! We did it! We made it!

Alt Text

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.

Discussion (2)

pic
Editor guide
Collapse
danielskiala profile image
danielskiala

Thanks for the explanation

Collapse
ebereplenty profile image
NJOKU SAMSON EBERE Author

Welcome danielskiala and thank you for taking your time to read through 😊