How can I solve this styling issues? - css

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

Maybe you can try this:
padding: 10px;

Answer 3

Add:
style="padding-top:10px;"
to each 'a' (anchor) element