Hinzufügen Raum zwischen anklickbare Bilder ohne den Randraum klickbare

Question

https://jsfiddle.net/ets9rmw9/1/

In Bezug auf die Symbole in der rechten oberen Ecke der Website, ich versuche, etwas Platz zwischen ihnen zu setzen, aber wenn ich die Margen platziere sie aus, der Randbereich wird ebenfalls anklickbar, das ist nicht genau das, was ich möchte. Ich kann nicht herausfinden, wie man den Abstand zwischen ihnen schafft, ohne sie anklickbar zu machen, Padding und Ränder funktionieren nicht.

<div class="wrapper"> 
<img class="logo" src="Logo.png" /> 
<nav> 
<ul class="nav"> 
    <li class="navlist"><a href="#">Properties</a></li> 
    <li class="navlist"><a href="#">The Team</a></li> 
    <li class="navlist"><a href="#">Contact Us</a></li> 
</ul> 
</nav> 
<div class="imgs"> 
<a href="#" title="Twitter" alt=" Icon"><img src="twitter.png" /></a> 
<a href="#" title="Facebook" alt=" Icon"><img src="facebook.png" /></a> 
<a href="#" title="Instagram" alt=" Icon"><img src="instagram.png" /></a> 
</div> 
</div> 
<footer> 
<p class="buttons">Real estate</p> 
</footer> 


body { 
background-color: #ffffff; 
margin: 0; 
display: table; 
height: 100%; 
width: 100%; 
background-image: url(nice.jpg); 
background-size: 100% 100%; 
overflow: auto; 
} 

.wrapper { 
display: flex; 
flex-direction: row; 
justify-content: space-between; 
text-align: center; 
padding: 0px; 
height: auto; 
background-color: whitesmoke; 
} 

footer { 
background-color: #cbb492; 
display: table-row; 
height: 2px; 
text-align: center; 
} 

li a { 
text-decoration: none; 
font-variant: small-caps; 
color: black; 
} 

li:hover { 
background-color: #cbb492; 
border-bottom: 0.5px solid gray; 
} 

nav { 
padding-bottom: 2px; 
padding-top: 2px; 
background-color: whitesmoke; 
} 

.logo { 
height: 28px; 
width: 90px; 
z-index: -10; 
} 

p { 
color: white; 
font-size: 6px; 
text-align: left; 
padding-left: 20px; 
} 

.navlist { 
display: inline; 
padding-left: 30px; 
margin-left: 10px; 
margin-right: 10px; 
padding-right: 30px; 
padding-top: 5.3px; 
padding-bottom: 6.2px; 
} 

.nav { 
list-style: none; 
padding: 0; 
width: 100%; 
margin: 1px; 
top: 0px; 
margin-top: 3px; 
} 

.imgs { 
list-style: none; 
margin: 0; 
padding: 0px; 
float: right; 
width: 60px; 
height: 100%; 
padding-top: 5.5px; 
padding-bottom: 5.5px; 
} 

.imgs img { 
width: 20%; 
height: 20%; 
opacity: 0.7; 
margin-right: 5px; 
} 

.imgs img:hover { 
opacity: 1.0; 
} 

Answer 1

Bitte fügen Sie diese CSS:

.imgs img { 
display: inline-block; 
} 

Answer 2

display:inline-block Verwendet in img-Tag und fügen Marge in a Tag. Wie folgt aus:

.imgs img { 
    display:inline-block; 
} 
.imgs a{ 
    margin-right:5px;  
} 

Hier ist Ihr Update Geige Code: https://jsfiddle.net/ets9rmw9/3/