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

Question

我有这个代码，听说hspace不会再用了。我怎样才能在它们之间添加 space 在上面和 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

也许你可以试试这个：

padding: 10px;

Answer 2

添加：

    style="padding-top:10px;"

每个 'a'（锚点）元素

Answer 3

我建议删除您标签上的所有内联代码，因为其中一些代码已被弃用或不如 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/

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

How can I solve this styling issues?

html

css

inline