このスタイリングの問題を解決するにはどうすればよいですか？

Question

私はこのコードを持っていますが、hspaceはもはや使用されないと聞きました。どのように私はそれらの間にスペースを追加することができ、10px間は良いでしょう、私はマージントップと一緒に働いていないと私の他のウィジェットを壊した。ここで

は一例です：

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

私はそれらbeween 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

私はwoulあなたのタグにあるすべてのインラインコードを削除することをお勧めします。その中には非難されたり、CSSほど役に立たないものもあります。

このようなことをお勧めします。

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

UPDATE：HTMLの場合

あなただけ使用したい場合あなたの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

追加：各 'A' へ

style="padding-top:10px;" 

（アンカー）要素