Difference Between Margin and Padding

What is the difference between margin and padding in CSS?

Hello Friends, in today’s article, we will learn how the margin and padding works in CSS, there are a lot of confusions in his mind of web designers , so in today’s article, we will overcome these confusions.

What is Margin

Friends, if we use CSS margin property in any HTML element or div then that element or div then its sets space between a border and other outer elements.

For Example

<div class="header"></div>
<div class="slider"></div>

<style type="text/css">

  .slider{
      margin-top:0px;
  }
  }
</style>
<div class="header"></div>
<div class="slider"></div>

<style type="text/css">

  .slider{
      margin-top:10px;
  }
  }
</style>

What is Padding

When we add CSS padding property in any element or div then its sets space between a border and an element content. Margin sets space between a border and other outer elements.

<div class="header"></div>
<div class="slider"></div>

<style type="text/css">

  .slider{
      padding:0px;
  }
</style>
<div class="header"></div>
<div class="slider"></div>

<style type="text/css">

  .slider{
      padding:10px;
  }
</style>

One Reply to “Difference Between Margin and Padding

Leave a Reply

Your email address will not be published. Required fields are marked *