How can I solve this styling issues?

Question

I have this code, I heard that hspace will be not in use anymore. How can I add space between them on above and between 10px would be good, I tried with margin-top did not worked and broke my other widgets as well.

Here is an example:

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

I would like to have 10px beween them and when resized on top too. I want them all in once code, since this is a widget I want it with built in 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

I would recommend to remove all the inline code that you have on your tags, as some of them got deprecated or are not as useful as the CSS.

I would suggest you to do something like this.

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

And for the CSS:

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

An example of this working: https://jsfiddle.net/vfvhqvzf/1/

UPDATE:

If you just want to use inline code on your html you could also try this:

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

Demo: https://jsfiddle.net/vfvhqvzf/4/

Answer 2

Add:

    style="padding-top:10px;" 

to each 'a' (anchor) element

Answer 3

Maybe you can try this:

padding: 10px;