<h1 id="heading-the-css-box-model">The CSS Box Model</h1>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content</p>
<h2 id="heading-content">Content</h2>
<p>Whatever we write it's called content.</p>
<pre><code>&lt;h1&gt;Content&lt;/h1&gt;
</code></pre><h2 id="heading-border">Border</h2>
<p>border is just above the padding whatever we give border to content
there are different border type like dashed line solid
you can give border to top bottom left right etc</p>
<pre><code>border: <span class="hljs-number">2</span>px solid red;
</code></pre><h2 id="heading-padding">padding</h2>
<p>padding is gap between content and border. if you want to gap between border and content than you have to give margin you can give margin left right bottom top etc</p>
<pre><code>h1{
  margin-top:<span class="hljs-number">5</span>px;
  magin-left:<span class="hljs-number">5</span>px;
margin-bottom:<span class="hljs-number">5</span>px;
margin-right:<span class="hljs-number">5</span>px;

magin:<span class="hljs-number">5</span>px; <span class="hljs-comment">//this will aplly on left right top bottom</span>
}
</code></pre><h2 id="heading-margin">margin</h2>
<p>margin we use when we want to give space outside the border
you can give margin on all directions left top bottom right</p>
<pre><code>margin:<span class="hljs-number">5</span>px;
</code></pre>

# The CSS Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content

## Content
Whatever we write it's called content.

```
<h1>Content</h1>
``` 


## Border 
border is just above the padding whatever we give border to content
there are different border type like dashed line solid
you can give border to top bottom left right etc


```
border: 2px solid red;
``` 

## padding
padding is gap between content and border. if you want to gap between border and content than you have to give margin you can give margin left right bottom top etc


```
h1{
  margin-top:5px;
  magin-left:5px;
margin-bottom:5px;
margin-right:5px;

magin:5px; //this will aplly on left right top bottom
}
``` 

## margin
margin we use when we want to give space outside the border
you can give margin on all directions left top bottom right


```
margin:5px;
``` 





CSS Box Model

The CSS Box Model

CSS Box Model

Table of contents

The CSS Box Model

Content

Border

padding

margin