Как я могу решить эту проблему?

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 beween их и при изменении размеров сверху тоже. Я хочу, чтобы все они были в коде, так как это виджет, который я хочу со встроенным 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 woul d рекомендуется удалить весь встроенный код, который у вас есть в ваших тегах, поскольку некоторые из них устарели или не так полезны, как 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/

UPDATE:

Если вы просто хотите использовать встроенный код на вашем 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

Добавить:

style="padding-top:10px;" 

каждому 'а' элемент (якорь)