title: How to add a margin to a paragraph?
body: <p>I want to make a website and I am paragraphs with border. I tried margin on css but doesn't work. How to make paragraph margin on this?</p>
  
  <p>This is my HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      margin:0px;
      font-family:Calibri;
      background-color:#58d68d ;
  }
  
  /* Navigation Bar */
  ul{
      margin:0px;
      padding:0px;
      overflow:hidden;
      background-color:white;
      top:0px;
      width:100%;
  }
  li.brand{
      margin-left:100px;
  }
  li.active{
      background-color:#FAFAFA;
  }
  li.right{
      float:right;
  }
  li.right-space{
      float:right;
      margin-right:100px;
  }
  li{
      float: left;
  }
  li, a{
      font-size:18px;
      display:block;
      color:#58d68d;
      text-align:center;
      padding:7px 12px;
      text-decoration:none;
      transition:0.4s;
  }
  li:hover, a:hover{
      background-color:#FAFAFA;
  }
  
  /* Intro */
  h1{
      margin-top:20px;
      margin-left:100px;
      font-size:100px;
      color:white;
      margin-bottom:0px;
  }
  h2{
      margin-top:0px;
      margin-bottom:50px;
      margin-left:100px;
      color:white;
      max-width:1000px;
      opacity:0.7;
  }
  
  /* Packs Section */
  div.packs{
      width:100%;
      height:500px;
      background-color:white;
  }
  p{
      margin:50px;
      display:inline;
      padding:7px 12px;
      border-left:6px solid red;
      background-color:lightgrey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Navigation Bar --&gt;
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;!-- Left --&gt;
          &lt;li class="brand"&gt;&lt;a href="http://www.packet.ml"&gt;Packet.ml&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;!-- Right --&gt;
          &lt;li class="right-space"&gt;&lt;a href="#home"&gt;Application&lt;/a&gt;&lt;/li&gt;
          &lt;li class="right"&gt;&lt;a href="#home"&gt;Download&lt;/a&gt;&lt;/li&gt;
          &lt;li class="right"&gt;&lt;a href="#home"&gt;Packets&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;!-- Intro --&gt;
  &lt;header&gt;
  &lt;h1&gt;Packet&lt;/h1&gt;
  &lt;h2&gt;Any application, software programm or game in one place! Packets everywhere!&lt;/h2&gt;
  &lt;/header&gt;
  
  &lt;!-- Packs Section --&gt;
  &lt;section&gt;
  &lt;div class="packs"&gt;
  &lt;p&gt;Edition Packet&lt;/p&gt;
  &lt;p&gt;Full Packet&lt;/p&gt;
  &lt;p&gt;User Pro Packet&lt;/p&gt;
  &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried <code>margin:50px;</code>, but not work. This command action only on margin-left and right. </p>
  
  <p>Any ideas?</p>