title: How to move a circle down by 15px with CSS HTML
body: <p>I would like to move the circle down by 15px with CSS as an image below. I've attempted with <code>padding-bottom</code> or <code>margin-bottom</code> in the <code>.circle</code> class, yet it did work in another way as making the circle longer than itself.</p>
  
  <p><img src="https://i.stack.imgur.com/aixBi.png" alt="enter image description here"></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table id="showRoom"&gt;
      &lt;tr class="box_shadow"&gt;
          &lt;td&gt;
              &lt;div class="news_column1"&gt; 
                  &lt;a target="_blank" href="http://google.com"&gt;
                      &lt;span class="circle"&gt;P1&lt;/span&gt;
                      &lt;span class="imgswap"&gt;Showroom 1&lt;/span&gt;
                      &lt;div class="news_img"&gt;
                          &lt;div&gt;
                              &lt;p&gt;Book Now!&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
      background-color: #F6F6F6;
  }
  
  #showRoom {
      margin-left: 10px;
      margin-top: 20px;
      width: auto;
      border-collapse: collapse;
  }
  
  table td {
      padding: 0;
  }
  
  table .box_shadow {
      background-color: #FFF;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      font-weight: normal;
      font-family: 'Scada', sans-serif;
      display: block;
      -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
      -moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
      box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
  }
  
  table tr .text_plant_address {
      background-color: #FFF;
      width: 200px;
      height: 200px;
      line-height: 20px;
      text-align: center;
      font-weight: normal;
      font-family: 'Scada', sans-serif;
      margin: 0;
      padding: 0;
  }
  
  table tr td span {
      height: 195px;
      width: auto;
  }
  
  table tr td div {
      width: 200px;
      height: 200px;
      position: relative;
  }
  
  table tr td a {
      text-decoration: none;
  }
  
  table tr td .text_plant {
      border-bottom: 1px solid #D0D0D0;
      font-family: ballpark_weiner, Arial;
      font-size: 26px;
      letter-spacing: 1px;
      padding: 0 15px;
  }
  
  table tr td .text_address {
      font-size: 10px;
      font-family: Arial;
      display: block;
      position: relative;
      height: auto;
      margin-top: 5px;
  }
  
  .news_column1 {
      background-color: #FF7F7F;
      /*background-color: #FFF;*/
      /*border-radius: 15px;*/
  }
  
  table tr td div:hover {
      cursor: pointer;
  }
  
  .news_img {
      width: 200px;
      height: 70px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.4);
      font-family: 'Times New Roman';
      font-weight: bold;
      letter-spacing: 0.5px;
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      opacity: 0.95;
      /*border-radius: 0 0 15px 15px;*/
  }
  
  .news_img div {
      width: 200px;
      height: 10px;
      margin: 0;
      padding: 0;
      display: table-cell;
      vertical-align: middle;
  }
  
  .news_img div p {
      display: block;
      margin-top: 25px;
      font-size: 17px;
      color: #FFF;
      transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      /* IE 9 */
      -webkit-transform: rotate(-10deg);
      /* Opera, Chrome, and Safari */
  }
  
  span.circle {
      width: 100px;
      height: 100px;
      font-size: 30px;
      color: #fff;
      line-height: 100px;
      text-align: center;
      background-color: #111111;
      opacity: 0.3;
      display: block;
      margin: 0 50px 0 50px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
  }
  
  span.imgswap {
      display: block;
      opacity: 0.5;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
      font-family: sans-serif;
      font-size: 20px;
      padding-top: 10px;
      font-family: Stark;
      letter-spacing: 0.5px;
  }
  </code></pre>
  
  <p><strong>JSFIDDLE:</strong> <strong><a href="http://jsfiddle.net/huydq91/rB5hX/7/" rel="nofollow noreferrer">http://jsfiddle.net/huydq91/rB5hX/7/</a></strong></p>