Question

我有这个代码，我听说hspace将不再使用了。如何在上面和10px之间添加空间会很好，我尝试使用margin-top也没有用，并打破了我的其他小部件。

以下是一个例子：

Here the code does not have space between them on vertical

This is the wide view here it looks better, once resized into smaller screens I get the above result

我希望在他们之间有10px，并且在调整大小时也是如此。我想把它们全部放在一次代码中，因为这是一个我希望它内置CSS的小部件。

<div align="center">
  <a href="https://facebook.com/testclue">
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" align="middle" alt="TestClue on Facebook" height="60" width="60" hspace="10">
  </a>
  <a href="https://twitter.com/testclue">
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" align="middle" alt="TestClue on Twitter" height="60" width="60" hspace="10">
  </a>
  <a href="https://www.linkedin.com/company/testclue">
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" align="middle" alt="TestClue on LinkedIN" height="60" width="60" hspace="10">
  </a>
  <a href="https://plus.google.com/+Testclue">
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" align="middle" alt="TestClue on Google+" height="60" width="60" hspace="10">
  </a>
</div>

Answer 1

我建议您删除标记上的所有内联代码，因为其中一些代码已被弃用或不如CSS有用。

我建议你做这样的事情。

对于HTML：

<div id="social-networks-container">
  <div class="social-network">
    <a href="https://facebook.com/testclue">
      <img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" />
    </a>
  </div>
  <div class="social-network">
    <a href="https://twitter.com/testclue">
      <img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" />
    </a>
  </div>
  <div class="social-network">
    <a href="https://www.linkedin.com/company/testclue">
      <img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" />
    </a>
  </div>
  <div class="social-network">
    <a href="https://plus.google.com/+Testclue">
      <img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" />
    </a>
  </div>
</div>

对于CSS：

#social-networks-container .social-network {
  display: inline-block;
  margin: 10px;
}
#social-networks-container .social-network a {
  display: block;
}

这项工作的一个例子：https://jsfiddle.net/vfvhqvzf/1/

更新：

如果你只是想在你的html上使用内联代码，你也可以试试这个：

<div style="display:inline-flex;">
  <a href="https://facebook.com/testclue" style="display: block;padding: 10px;">
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" />
  </a>
  <a href="https://twitter.com/testclue" style="display: block;padding: 10px;">
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" />
  </a>
  <a href="https://www.linkedin.com/company/testclue" style="display: block;padding: 10px;">
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" />
  </a>
  <a href="https://plus.google.com/+Testclue" style="display: block;padding: 10px;">
    <img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" />
  </a>
</div>

演示：https://jsfiddle.net/vfvhqvzf/4/

Answer 2

也许你可以试试这个：

padding: 10px;

Answer 3

添加：

    style="padding-top:10px;"

到每个'a'（锚点）元素

我该如何解决这个样式问题？

3 个答案: