title: Padding not working for divs icons
body: <p>I am trying to add padding to my .slotIcon class. My .slots class is the container, witch is inline-block with another div, trying to make both divs side by side (50% width).</p>
  
  <p>This is all under the "work" section.</p>
  
  <p>Now padding doesn't affect the icons, and margins move the entire .slots div.</p>
  
  <p>All I want to do is slightly lower the icon and text, in the .slots div.</p>
  
  <p><a href="https://jsfiddle.net/js1rgh4b/1/" rel="nofollow">https://jsfiddle.net/js1rgh4b/1/</a></p>
  
  <pre><code> &lt;div  class="work" &gt;
      &lt;h2&gt;Work&lt;/h2&gt;
  
      &lt;div class="slots"&gt;
  
          &lt;div class="slotIcon"&gt;&lt;/div&gt;
              &lt;p&gt;Slots&lt;/p&gt;
      &lt;/div&gt;&lt;div class="OEA"&gt;
  
          &lt;div class="OEAicon"&gt;&lt;/div&gt;
              &lt;p&gt;OEA&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.slots {
  display: inline-block;
  width: 50%;
  height: 350px;
  background-color: #3484ce;
  }
  
  
  
  .OEA {
  display: inline-block;
  width: 50%;
  height: 350px;
  background-color: green;
  }
  
  .slotIcon {
  width: 150px;
  height: 159px;
  background-repeat: no-repeat;
  background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
  margin-left: auto;
  margin-right: auto;
  }
  
  
  
  .OEAicon {
  width: 200px;
  height: 159px;
  background-repeat: no-repeat;
  background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
  margin-left: auto;
  margin-right: auto;
  
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/js1rgh4b/1/" rel="nofollow">https://jsfiddle.net/js1rgh4b/1/</a></p>