CSS 101 - Box Model
Tags: css, beginners, tutorial
Published: 2021-03-16 01:31:09

---
title: CSS 101 - Box Model
published: true
description: 
tags: CSS, beginner, tutorial
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--SfWzjSi6--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/y0qmpmhtnw1db8s4jxx9.jpg
series: CSS 101
---

One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.

Click follow if you want to miss nothing. 


<h2>CSS Box Model</h2>
In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/segc4rsc69p729iexhw1.png)

To best understand that concept let do an example. Create a index.html document
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div>This is a CSS box</div>
    <div>This is a CSS box</div>
    <div>This is a CSS box</div>
</body>
</html>
```
This is a classic html document with a link to a external css (main.css) and three simple div

In main.css insert those lines:
```css
div {
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 0;
}
```
This css create a style for our div
![style div](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8vm0icl7qctyaitn2cr.png)

<h2>Margin, Border, Padding</h2>
Now let's review all those 3 properties and understand how they impact the CSS box. 

<b>Padding</b>
The padding is the space around the content. In our example the padding is the space between our div text and our div border. Let's change padding to zero and see what append.
```css
div {
    width: 200px;
    padding: 0;
    border: 2px solid gray;
    margin: 0;
}
```
![padding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jswclqfxw365k9slvx5z.png)
Padding to zero remove space between border and content.

<b>Border</b>
The border goes around the padding and content. The border can be visible or not and can have different style and height.
 
<b>Margin</b>
The margin is the space outside the border. In our example there is no space between our div. Let's change that.
```css
div {
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}
```
Setting margin to 10px; set a space of 10px all around each div:
![margin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb5yi713qnzvplwa2sfq.png)

<h2>Block vs inline</h2>
CSS box Model can have two display style: Block or inline-block.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Example of block elements: div, h1 and form

<b>Inline</b>
An inline element does not start on a new line and only takes up as much width as necessary.

Example of inline elements: span, a and img

Let review our previous example. Like mention the div by default have a block display style. Let's change that for inline-block style.
```css
div {
    display: inline;
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}
```
![inline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqz8dd39bh0h6vewtoez.png)
<b>Inline vs inline-block</b>
Compared to display: inline, the major difference is that inline-block allows to set a width and height on the element. Also, with display: inline, top and bottom margins & paddings are not respected, and with display: inline-block they are.

Let's change our example to display: inline-block
```css
div {
    display: inline-block;
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}
```
![inline-block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itn72m8ltbra1c2lap8f.png)
Compare to inline, the width, top and bottom margin and padding are respected.

<h2>Margin and Padding</h2>
Up until now we use a one value margin and padding number be it's good to know we can apply margin and padding individually.

The available property are:
margin-top | padding-top
margin-right | padding-right
margin-bottom | padding-bottom
margin-left | padding-left


```css
div {
    margin-left: 10px;
    padding-top: 20px;
}
```

It is also possible to set margin and padding with a shorthand property:
```css
div {
    margin: 10px 0px 5px 20px;
    padding: 20px 10px;
}
``` 
That's equivalent to:
```css
div {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 20px;

    padding-top: 20px;
    padding-bottom: 20px;

    padding-right: 10px
    padding-left: 10px;
}
```
<h2>Border</h2>
The CSS border properties allow you to specify the width, the style and color of an element's border.

The border-style property specifies what kind of border to display.
Some example of border-style are:
- solid
- dotted
- dashed
- double
- none 

border: width style color;
```css
div {
    display: inline-block;
    width: 200px;
    padding: 10px;
    border: 2px dotted gray;
    margin: 10px;
}
```

We can also use border-radius to give a round border:
```css
div {
    display: block;
    width: 200px;
    padding: 5px;
    border: 2px solid gray;
    margin: 10px;
    border-radius: 16px;
  }
```
![border-radius](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s78vor4junr7g716rl4d.png)

<h2>Height and Width</h2>
The CSS height and width properties are used to set the height and width of an element

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.
```css
div {
  height: 100px;
  width: 50%;
  background-color: lightgray;
  margin: 5px;
}
```
So in that example the element have a height of 100px and width of 50% of is containing block.
![height and width](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9colevt1sq1smv4y0ar9.png)


<h2>Conclusion</h2>
That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>