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>

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Tickets for Dubai expo 2020,Expo 2020 Dubai tickets price,dubai expo 2020 tickets,dubai world expo 2020,dubai 2020 expo dates, Dubai 2020, Dubai Expo 2020, dubai,dubai expo 2020 tickets price, dubai expo 2020 projects, expo dubai,dubai expo 2020 projects, Recent comment authors
  Subscribe  
newest oldest most voted
Notify of