Bu stil sorunlarını nasıl çözebilirim?

Question

Bu kodu aldım, hspace'ın artık kullanılmayacağını duydum. Yukarıdakiler arasında nasıl boşluk ekleyebilirim ve 10px arasında iyi olurdu, marj-top ile denedim ve diğer aletlerimi de kırdım.

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

Onlara beween 10px ve çok üstünde resized zaman var istiyorum: Burada

bir örnektir. Hepsini bir kez kodda istiyorum, çünkü bu CSS'de yerleşik olarak istediğim bir widget.

<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

Ben woul d Bazıları kullanımdan kaldırılmış veya CSS kadar kullanışlı olmadığından etiketlerinizde bulunan tüm satır içi kodları kaldırmanızı öneririz.

Böyle bir şey yapmanızı öneririm.

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

Ve CSS: HTML için

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

bu çalışma örneği: https://jsfiddle.net/vfvhqvzf/1/

GÜNCELLEME:

sadece kullanmak istiyorsanız html'nizdeki satır içi kodu da deneyebilirsiniz:

<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

Belki bu deneyebilirsiniz:

padding: 10px; 

Answer 3

Ekleme: Her 'a' için

style="padding-top:10px;" 

(çapa) eleman