<p>The browse engine represents content into a rectangular box.CSS defines some content area of this element, we can asinine some padding , margin  and border to it.
The CSS box model looks like this.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1669438190309/UsYUnsjFK.png" alt="Untitled.png" /></p>
<h1 id="heading-padding">Padding:</h1>
<p>Padding takes place around the content. To apply padding we have different properties.</p>
<ul>
<li>padding-top:10px;</li>
<li>padding-bottom:10px;</li>
<li>padding-right:10px;</li>
<li>padding-left:10px;</li>
</ul>
<p>And we also have a shortcut to apply padding.</p>
<ul>
<li>padding:10px 10px 10px 10px; //top right bottom left.</li>
<li>padding:20px 40px; //top-bottom left-right.</li>
</ul>
<h1 id="heading-border">Border:</h1>
<p>Borer resides in a box model after padding. We can also control the width,height and color of the border.
border:4px solid black;</p>
<h1 id="heading-margine">Margine:</h1>
<p>Margine take place in the CSS Box Model after border. We have margin property to apply margin.</p>
<p>margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;</p>
<p>And we also have a shortcut for margin.</p>
<p>margin:10px 20px 10px 40px; // top right bottom left, it works in clockwise direction.</p>
<iframe height="300" style="width:100%" src="https://codepen.io/Ashishkumarkyp/embed/yLEjmVX?default-tab=html&amp;editable=true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/yLEjmVX">
  cssBoxModel</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

The browse engine represents content into a rectangular box.CSS defines some content area of this element, we can asinine some padding , margin  and border to it.
The CSS box model looks like this.

![Untitled.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669438190309/UsYUnsjFK.png align="left")

# Padding:
Padding takes place around the content. To apply padding we have different properties.

- padding-top:10px;
- padding-bottom:10px;
- padding-right:10px;
- padding-left:10px;

And we also have a shortcut to apply padding.

- padding:10px 10px 10px 10px; //top right bottom left.
- padding:20px 40px; //top-bottom left-right.

# Border:
Borer resides in a box model after padding. We can also control the width,height and color of the border.
border:4px solid black;

# Margine:
Margine take place in the CSS Box Model after border. We have margin property to apply margin.

margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;

And we also have a shortcut for margin.

margin:10px 20px 10px 40px; // top right bottom left, it works in clockwise direction.
                                                            
<iframe height="300" style="width: 100%;" scrolling="no" title="cssBoxModel" src="https://codepen.io/Ashishkumarkyp/embed/yLEjmVX?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/yLEjmVX">
  cssBoxModel</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

CSS Box Model

Table of contents

Padding:

Border:

Margine: