html - 无法向图像添加填充

Question

我无法在 Dreamweaver CC 2015 中为我的社交媒体图标添加填充。我的代码经验很少，但需要在今晚之前完成学校的作业。基本上，我需要在我的图标之间留出空间以看起来更具视觉吸引力(20px 是理想的)。我遇到的问题是，当我更改 CSS 的填充或边距时，在 Split View中，它显示了空间是如何创建但当我切换到实时取景时，空间回到 0px 和预览时相同。

代码:

.social-icon {
  margin-right: 100px;
  margin-left: 100px;
  margin-top: 0px;
  padding-right: 100px;
}

<footer>
  <center>
    <h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
      <a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a>
      <a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a>
    </h4>
  </center>
</footer>

Answer 1

.social-icon {
margin-right: 10px;
margin-left: 10px;

}

<footer>
  <center>
    <h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
      <a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a>
      <a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a>
    </h4>
  </center>
</footer>

你想让它们对齐？？

或者你可以用 flexbox 来做

.footer{
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
}

.social-icon {
margin: 10px;

}

<footer>
  <center>
    <h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
      <a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a>
      <a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a>
      <a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a>
    </h4>
  </center>
</footer>