CSS Box Model
Tags: css, webdev, html, design
Published: 2021-07-15 08:45:54

**Everything in CSS is a box**. Yes I mean it. Understanding how the CSS Box Model works is therefore a core foundation of CSS.

It is one of the essential concepts to build layouts and make things look the way you want them. In Today's post we will be covering some key topics such as 
* Border
* Padding
* Margin
* Box sizing

Every element in a css has box around it. whether its visible or not, but there's a box. You will be working with different elements such as paragraph, images, headings,buttons etc., everything has box around it. Being able to understand how these boxes work is important and use these properties to manipulate the boxes the way you want. It is crucial part of designing layouts.

Each boxes consists of several properties with it. They are as mentioned below

* Content Box
* Border
* Padding
* Margin

**Content Box**
Before going through content box. There are two types of elements in HTML. They are
* Inline elements 
* Block level elements.

**Inline elements**
The name says it doesn't start with new line. This does not force the element to display in a separate line. It only only takes up as much width as necessary.
Ex: `span`, `input`,`a`,`button`

**Block level elements**: 
This type of elements starts with new line. It occupies entire horizontal and vertical space as much as by default.
Ex: `div`,`headings`,`paragraphs`

The content box is the center of the box model. This is where text, images, and other html elements appear in a web page. We use the `height` and `width` CSS properties to determine the size of the content area.

By default, the size of a content area will be equal to the size of its elements. If you have a line of text, the box will be as long and as tall as the line of text.

Using height and width properties, we can manipulate the elements layout which is visible inside the box model.
Example:
```
<p style="background: palegreen;">
Hi, I'm Paragraph
</p>
``` 

![Block element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5awos18k74hdrdq8svu.png)

Since `P` is block level element. So by default it takes the entire space by default as shown above.
In order to change the layout of this, we need to change the height and width of the element.

Suppose we want to design a paragraph element that is `100px` of height and width. We can achieve by changing the height and width of particular element.
Ex:
```
<p style="height: 100px;width: 100px;background: palegreen;">
Hi, I'm Paragraph
</p>
``` 
![paragraph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5ukt0c0py13gu36cxmu.png)

If you look at the above image, the layout of the element has been changed. If you see the content box, it shows `100 * 100` which is nothing but `width * height`. Before applying the styles, by default according to the screen layout these sizes are chosen.

When we try to change height and width of block elements, I've changed using `px` but we have lot of different units available. In order to know more about units, please refer this [link](https://www.w3schools.com/cssref/css_units.asp)

But if we try to change the layout of inline elements,
Example
```
<span style="height: 120px;width: 500px;background: palegreen;">
Hi, I'm Span
</span>
```
![Inline elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jnewc63xy3dbrdhirdy.png)

Notice that size has not been varied, because for **inline elements applying height and width styles won't work** and to make them work we need to change the display style of these elements in to `inline-block` elements.

```
<span style="height: 120px;width: 500px;background: palegreen;display: inline-block;">
Hi, I'm Span
</span>
```
![Inline Block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3sizsdstnhbelmz4tfh.png)

By adding `display:inline-block` style property to inline elements we are making them to behave as combination of both `inline` and `block` elements. (By default we don't want to mention the display property unless we want to change the height and width of inline elements).

**Image elements are inline element by default** but its a [replaced elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element). So it behaves both as `inline` as  well as `inline-block`. You can set height and width to change the size [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#styling_with_css).

**Border**
The name explains that it applies border to specific elements.The border that goes around the content of a box, or around the padding of a box if a padding value is specified.
Commonly we use a shorthand property for border which sets width,style and color for element.
```
border: 1px solid red;
1px -> border-width
solid -> border-style
red -> border-color.

<span style="height: 120px;width: 500px;background: palegreen;display: inline-block;border: 10px solid red;">
Hi, I'm Span
</span>
```
![Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95s4u6s2mnipqjjeqw83.png)

Border of `10px` with red color has been applied to the element and if you look at the border in the box model it denotes 10 on each sides which represents `10px` width. we can apply different colors for the same border too.
We can change the radius of element using `border-radius` property.
You can set a separate width, color, radius styles on each sides of border.
There are lot of border-style options available. Play through those options [here](https://www.w3schools.com/cssref/pr_border-style.asp).

**Padding**
The padding area is the space around the content area and within the border-box. A box that surrounds the html element's inner content. Because padding is inside the box, the background of the box will be visible in the space that it creates.
We can apply padding to either one side or to all the sides.

{% codepen https://codepen.io/Naveenchandar/pen/gOWmwaB %}

If you look at the above example image, there's a space between border and the content. That's padding.

This is a shorthand for writing padding. It applies `10px` padding on all the sides starting from top(clockwise direction).
```
padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
```
If all the sides are same then definitely you can use the shorthand property. If needed you can increase either one of the sides too and the space between the content and border for that particular side will alone increase.

There's another shorthand for padding.
`padding: 10px 20px`

If padding top and bottom are same and padding left and right are same then we can describe it as mentioned above where as first one represents top and bottom and latter one represents left and right.

If left and right are same but top and bottom are different, then there's another shorthand to use is
```
padding: 5px 10px 7px
5px -> padding top.
10px -> padding left and padding right.
7px -> padding bottom.
```

**Margin**
This is the outermost layer of the box model. This area creates an empty gap that separates one element from other on the web page.

{% codepen https://codepen.io/Naveenchandar/pen/mdmWrEG %}

The above example will create a `10px` space between two boxes on a page. Same as padding, you can apply margin either on all four sides or one side. It follows the same clockwise direction. **Difference between padding and margin is padding will occupy the space within content box and margin occurs outside the content box**.

By default some elements has margins/padding based on certain browsers. You can change those properties too. So the common and most followed way is to reset these properties in order to display same across all the browsers.
```
body{
  padding: 0
  margin: 0
}
```

**Box sizing**
This property defines how the element width and height can be calculated, whether to include border and padding or not.
By default,the height and width applied will be applied to element's content box. If any element has padding/border then the height and width of element changes. If the one element height/width changes then based on this, adjacent elements will be changed because its taking more space than expected.

It is often to set `box-sizing:border-box` to layout elements to avoid the overflow of elements.

Box-sizing property has list of values.
* content-box
* border-box

**content-box**
This is the default box sizing property specified by the [CSS standard] (https://drafts.csswg.org/css-sizing/#box-sizing). This property will include only the height and width of the element but does not include the padding/border/margin.

{% codepen https://codepen.io/Naveenchandar/pen/oNWZzWE %}

From the above example, two `div` elements will have different sizes because of padding applied to `div2`. Since `box-sizing` will set to `content-box` by default (if not specified). Here, the height and width will be calculated by.

 **width = width of the content
    height = height of the content**

**border-box**
Inorder to make them equal size, `border-box` value of `box-sizing` to the rescue. This property allows us to include the padding and border in an element's total width and height.
If you set `box-sizing: border-box` on an element, padding and border are included in the width and height.

{% codepen https://codepen.io/Naveenchandar/pen/xxdqErX %}

If you look at the above example, `div2` has a property of `box-sizing: border-box`. By setting this property, padding which you have applied earlier will be counted along with height and width of actual element. Here the height and width will be calculated by

**width = border + padding + width of the content
   height = border + padding + width of the content**

The CSS box model is an integral component of design and one of the fundamentals of web development. This box model will enable you to better align elements with other elements and create more complex layouts. 

Thanks for reading this post and have a great day 🙂.