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

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/