CSS Box Model
Tags: webdev, beginners, programming, css
Published: 2022-03-13 23:54:57


All HTML elements written in CSS have a box around them, and understanding these boxes is important in mastering how to create layouts for a webpage.
The type of box applied to an element is defined by the `display` property and boxes have an outer display type and an inner display type. 

Outer Display Type 
The outer display type determines if the box is `inline` or `block`. These boxes are so classed in reference to their behavior in the flow of a webpage and relation to other boxes 

Block Boxes 
Block boxes start on a new line and extend to fill the available inline space
HTML elements, such as `<h1>` and `<p>`, use block as their outer display type by default. 

Inline Boxes
Inline boxes don’t start on a new line and are only as large as their content  
HTML elements, such as `<a>`, `<span>`, `<em>` and `<strong> `use inline as their outer display type by default.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lgczzq4j8j8xoe8lxzz.png)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwxNbMX" data-editable="true" data-user="solar0" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/solar0/pen/RwxNbMX">
  Untitled</a> by stephen (<a href="https://codepen.io/solar0">@solar0</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Inner Display Type
The inner display type determines how elements inside a particular box are laid out. By default, the elements inside a box are laid out in normal flow, just like any other block and inline elements (as explained above).

We can, however, change the inner display type by using display values like `flex` and then style the boxes according to flex rules.


The CSS box model defines how the different parts of a box — margin, border, padding, and content — work together to create the layout of a page.
The image below illustrates the box model:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heoz3utjrcr66o3hsdds.png)
 
Content box: The area where your content is displayed, which can be sized using properties like `width` and `height`

Padding: The padding sits around the content as white space; its size can be controlled using the `padding` property

Border: The border wraps the content and any padding. Its size and style can be controlled using the `border` property

Margin: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between the box and other elements. Its size can be controlled using the `margin` property

Examples
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqlh9stdn2ae3qofjl9z.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/844hb4j84u0nl7offyrn.png)


<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="ZEvEdzR" data-editable="true" data-user="solar0" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/solar0/pen/ZEvEdzR">
  Untitled</a> by stephen (<a href="https://codepen.io/solar0">@solar0</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>