CSS Box Model - Newbie’s Perspective
Tags: codenewbie, css, beginners, tutorial
Published: 2020-04-20 09:15:33

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

[Definition](#1)
[Code](#2)
[Final Code](#3)
[Conclusion](#4)

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](https://dev-to-uploads.s3.amazonaws.com/i/k4mggsmv5e8gxb4wzaox.jpg)

**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.

<a name="1"></a>
### 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](https://dev-to-uploads.s3.amazonaws.com/i/jsm663u6fvzpq4b5buzr.jpg)

Now, let's translate the diagram into code, enough of stories (theory).

<a name="2"></a>
## Code
* Please get your starter code [here](https://github.com/EBEREGIT/box-model-tutorial/tree/starter-code) 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.

```html

<!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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0qm111t5yctvgkks36ea.JPG)

* Notice that the image came with a default space around it. That is the default margin. Let's remove it. Clone [here](https://github.com/EBEREGIT/box-model-tutorial/tree/body-margin-remove) or copy the following CSS into the ``style`` tag of your HTML file 

```css
   body{
     margin: 0;
   }
```
* Run it in your browser. This is my result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ruru86w57zd4k512kv2o.JPG)

Now let's get down to the day's business

* Add a border with the following code or clone [here](https://github.com/EBEREGIT/box-model-tutorial/tree/add-border)

```css
  img{
    border: 5px solid red;
  }
```
* Run it in your browser. This is my result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/plb3mv3dxg4oju57ok1r.JPG)

* Add Padding with the following code or clone [here](https://github.com/EBEREGIT/box-model-tutorial/tree/add-padding)

```css
  img{
    border: 5px solid red;
    padding: 20px;
  }
```
* Run it in your browser. This is my result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/01zjji5x4ypu18rpo5u9.JPG)

* Add Margin with the following code or clone [here](https://github.com/EBEREGIT/box-model-tutorial/tree/add-margin)

```css
  img{
    border: 5px solid red;
    padding: 20px;
    margin: 20px;
  }
```
* Run it in your browser. This is my result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7aowqpgt6or44ivtzz0y.JPG)

<a name="3"></a>
### Final Code

{% github eberegit/box-model-tutorial no-readme %}

You can get the final code [here](https://github.com/EBEREGIT/box-model-tutorial) or copy the code below:

```html

<!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! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9wvxkbm23m3gi520fblw.jpg)

<a name="4"></a>
### 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](https://twitter.com/eberetwit) | [LinkedIn](https://www.linkedin.com/in/samson-ebere-njoku-profile/) | [Github](https://github.com/EBEREGIT)**

Thank You For Your Time.