-1

According to the example below, the "margin" and "padding" property will work to create a space of 100px around the paragraph element (creating space inside the border). So what is the difference between the "margin" and "padding" property in CSS?

<style type="text/css">
    div.bor {
       border:5px solid red;
    }
    div.mar {
       margin:100px;
    }
</style>
<div class="bor">
   <div class="mar"><p>This is a paragraph</p></div>
</div><br>
<div class="bor">
   <div style="padding:100px">
   <p>This is a paragraph</p>
</div>
</div>
pushkin
  • 7,514
  • 14
  • 41
  • 74
Suparno
  • 115
  • 5
  • you said it in your question. By the way if you don't have border specified they will almost behave the same **in your example** – Temani Afif Nov 03 '17 at 14:15
  • margin creates a space outside of the element, padding creates the space inside – Liquidchrome Nov 03 '17 at 14:16
  • `margin` creates space **outside** of the border of the *box-model*, `padding` creates space **inside** of the border of the *box-model*. – UncaughtTypeError Nov 03 '17 at 14:16
  • Your question refers to what is known as the CSS box model. This page should give you good insights to understand it better. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model – Erick Ruiz de Chavez Nov 03 '17 at 14:20

1 Answers1

0

Margin is outside, padding is inside the container.

.margin,
.padding {
  background: red;
}

.padding {
  padding: 10px;
}

.margin {
  margin: 10px;
}
<p class="margin">
  Margin
</p>
<p class="padding">
  Padding
</p>
Maharkus
  • 2,305
  • 17
  • 28