title: How to increase space between menu bar and widget
body: <p>I have added multiple images side by side in my <a href="http://songsmp3today.blogspot.in/" rel="nofollow">blog</a> </p>
  
  <p>here is the code</p>
  
  <pre><code>&lt;div class="images"&gt;
  &lt;figure&gt;
   &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsTtMLyNG08eYR0J00YY8zJQzB8Q" style="width:200px; height:100px;"/&gt;
      &lt;figcaption&gt;Itty&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsTtMLyNG08eYR0J00YY8zJQzB8Q" style="width:200px; height:100px;"/&gt;
      &lt;figcaption&gt;Bitty&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="http://oi57.tinypic.com/2mrch37.jpg" style="width:200px; height:100px;"/&gt;
      &lt;figcaption&gt;Kitty&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="http://oi57.tinypic.com/2mrch37.jpg" style="width:200px; height:100px;" /&gt;
      &lt;figcaption&gt;Commiteh&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Here is the css code. I added html and css in same widget by choosing html/javascript external widget in blogger by add widget option and i added that gadget below the menu bar and pages. Iam not able to know the adding of space between the menu bar and this widget. This is the orginal template as it looks In this <a href="http://videos2015z.blogspot.in/" rel="nofollow">site</a></p>
  
  <pre><code>figure {
      display: inline-block;
      margin: 30px 1em 1em 0;
  
  }
  
  figcaption {
      font-family: 'Comic Sans MS';
      text-align: center;
      font-size: 12pt;
  
  }
  </code></pre>
  
  <p></p>