CSS: The Box Model
Tags: css, boxmodel, html
Published: 2020-07-27 20:47:38

### This blog covers the basics of the Box Model with a CodePen example at the bottom to guide you along. [Jump To CodePen](https://dev.to/ethanmgustafson/css-the-box-model-27i9#here-is-the-example-that-covers-these-properties-and-the-box-model-here-in-codepen)

# Box Model

[w3schools Box Model](https://www.w3schools.com/css/css_boxmodel.asp)

### In Chrome Developer tools, you can find a box model you can use to debug your CSS.

![Imgur](https://i.imgur.com/g4gBZsY.png)
### The Box Model refers to the boxes that are generated with every HTML element. The browser sees each HTML element as a rectangular box. There are 4 parts of the Box Model:

1. Content
2. Padding
3. Border
4. Margin

## Inline & Block Level Elements

This link will give you more information on inline and block elements and will also show you all HTML elements with their level type:

- [w3schools inline/block elements](https://www.w3schools.com/html/html_blocks.asp)

## Inline Elements

HTML Inline elements take as much space as the text in the content box. They stay on the same line, next to each other until the line runs out of available space, then the next inline element begins on a new line. The `width` and `height` properties do not affect inline-level elements.

## Block Elements

HTML block elements span the entire width of their container but they keep the height of the text in the content box. They always begin on a new line and stack on top of each other, unlike inline-level elements. The `width` and `height` properties will affect block-level elements but will not affect inline-level elements.

## The `display` Property

The display property can be used to change the default behavior of `inline`/`block` level elements with three properties: `inline`, `block`, or `inline-block`. 

- Changing the `display` of an `inline` element to `block` will allow you to use `width` and `height` properties.
- Changing the `display` of a `block` element to `inline` will allow you to place elements side by side instead of stacked on top of each other, but will also make `width` and `height` ineffective on those elements.
- Changing the `display` of either `inline` or `block` to `inline-block` will give characteristics of both to the elements. `Width` and `height` values will now affect the elements just like how it affects `block` level elements, but the elements will now stand next to each other side by side, like `inline` level elements.

More information on the `display` property: [w3schools display property](https://www.w3schools.com/cssref/pr_class_display.asp)

- The Content box is where the content resides. Content can be text or images.
- Padding surrounds the Content Box. It gives space inside of the element around the content box.
- Border goes between margin and padding. It surrounds the padding and content box.
- Margin is the space that surrounds the whole element.

### All four of these boxes together determine the total area of an element.

---

### *The 5 properties of the Box model are*: Width, Height, Padding, Border, Margin.

## Width

Adjusts the `width` of the content box. More information on the width property can be found here: [w3schools width property](https://www.w3schools.com/cssref/pr_dim_width.asp)

## Height

Adjusts the `height` of the content box. More information on the height property can be found here: [w3schools height property](https://www.w3schools.com/cssref/pr_dim_height.asp)

## Padding

Padding will add or remove space within the element but will do so around the content box. More information on `padding` properties can be found here: [w3schools padding property](https://www.w3schools.com/css/css_padding.asp)

## Border

Border is added between `padding` and `margin`. More information on `border` properties can be found here: [w3schools border property](https://www.w3schools.com/css/css_border.asp)

## Margin

Margin will add or remove space around the element. More information on `margin` properties can be found here: [w3schools margin property](https://www.w3schools.com/css/css_margin.asp)

## For Box Properties, we will use the percentage and length data types.

- When percentages are used, it is defined by the size of its containing(or parent) element. If there was a `div` with `width` of `500px`, and the element inside of the `div` uses a `width` of `50%`, the `width` of the inside element would be `250px`.

## Pixels should be the only Absolute length unit you use for websites.

See CSS Best Practices: https://gist.github.com/basham/2175a16ab7c60ce8e001
{% gist https://gist.github.com/basham/2175a16ab7c60ce8e001 %}

## Relative length units are dependent upon the length of another element.

Using relative units can be useful for creating flexible layouts that display well in different screen sizes.

- `em` and `rem` are defined by the font size of the parent element and the root element.
- `em` inherits font size from its parent
- `rem` inherits font size from the root element

More on CSS Units: [CSS Absolute & Relative Units](https://www.w3schools.com/cssref/css_units.asp)

# Here is the example that covers these properties and the box model here in CodePen. 

Hit 'Edit on CodePen' to follow along. 👍

{% codepen https://codepen.io/GoodGuyGuf/pen/PoZvwvp %}