Question

我无法在Dreamweaver CC 2015中为社交媒体图标添加填充。我对代码的经验很少，但需要在今晚完成在学校的作业。基本上，我需要在我的图标之间留出空间，看起来更具视觉吸引力（20px是理想的）。我遇到的问题是当我更改CSS的填充或边距时，在分割视图中，它显示了空间的方式正在创建但是当我切换到实时视图时，空格会回到0px，并且在我预览时也是如此。

守则：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

你希望它们对齐吗？

或者您可以使用flexbox

＆＃13;

.footer{
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
}

.social-icon {
margin: 10px;

}

＆＃13;

<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>

＆＃13;

Answer 2

您无法向图像元素添加填充。您可以将其添加到它的父级，但由于边距，您仍然看不到任何事情。为什么不只是制作margin-right:200px;？

Answer 3

由于img标记不能包含任何子元素，因此它也不能具有填充。但是，你不能简单地将margin: 10px;添加到图像中吗？

https://jsfiddle.net/Lg9e6Lth/4/

Answer 4

您是否尝试过使用bootstraps缩略图类？只要搜索它你就会找到你想要的东西。 for thumbnail style it seems padded

Answer 5

我不确定我是否理解了问题，但这可能会很快解决问题。

您可以尝试将代码更改为：

.social-icon {
  margin-top: 0px;
  padding: 20px;
}

或

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

无法为图片

5 个答案: