DEV Community

Cover image for CSS 101 - Box Model
Eric The Coder
Eric The Coder

Posted on

CSS 101 - Box Model

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.

CSS Box Model

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

To best understand that concept let do an example. Create a index.html document

<!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>
Enter fullscreen mode Exit fullscreen mode

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:

div {
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

This css create a style for our div
style div

Margin, Border, Padding

Now let's review all those 3 properties and understand how they impact the CSS box.

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

div {
    width: 200px;
    padding: 0;
    border: 2px solid gray;
    margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

padding
Padding to zero remove space between border and content.

Border
The border goes around the padding and content. The border can be visible or not and can have different style and height.

Margin
The margin is the space outside the border. In our example there is no space between our div. Let's change that.

div {
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Setting margin to 10px; set a space of 10px all around each div:
margin

Block vs inline

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

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

div {
    display: inline;
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

inline
Inline vs inline-block
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

div {
    display: inline-block;
    width: 200px;
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

inline-block
Compare to inline, the width, top and bottom margin and padding are respected.

Margin and Padding

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

div {
    margin-left: 10px;
    padding-top: 20px;
}
Enter fullscreen mode Exit fullscreen mode

It is also possible to set margin and padding with a shorthand property:

div {
    margin: 10px 0px 5px 20px;
    padding: 20px 10px;
}
Enter fullscreen mode Exit fullscreen mode

That's equivalent to:

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;
}
Enter fullscreen mode Exit fullscreen mode

Border

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;

div {
    display: inline-block;
    width: 200px;
    padding: 10px;
    border: 2px dotted gray;
    margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

We can also use border-radius to give a round border:

div {
    display: block;
    width: 200px;
    padding: 5px;
    border: 2px solid gray;
    margin: 10px;
    border-radius: 16px;
  }
Enter fullscreen mode Exit fullscreen mode

border-radius

Height and Width

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.

div {
  height: 100px;
  width: 50%;
  background-color: lightgray;
  margin: 5px;
}
Enter fullscreen mode Exit fullscreen mode

So in that example the element have a height of 100px and width of 50% of is containing block.
height and width

Conclusion

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: Follow @justericchapman

Top comments (0)