Abstand zwischen den angezeigten Elementen

Question

Ich habe ein div Objekt mit zwei Font Awesome Icons inline angezeigt. Was ich erreichen möchte, ist mehr Platz zwischen den beiden Symbolen hinzuzufügen.

Dies ist, wie es im Moment aussieht:

Dies ist relevant HTML:

<div id= "contact"> 
    <i class="fa fa-envelope-o custom1 fa-2x"></i> 
    <i class="fa fa-phone custom2 fa-2x"></i>     
</div> 

Und die CSS:

div#contact {} 

#contact i.fa { 
    border: 2px solid #fff; 
    border-radius: 60px; 
    color: #fff; 
    display: inline-block; 
    height: 60px; 
    margin: 5px; 
    padding: 12px; 
    width: 60px; 
    margin-top:60px; 
} 

Wie kann ich dies erreichen?

Answer 1

Wenn Sie den Rand ändern, vergrößert sich der Abstand zwischen den Objekten.

margin: 10px; 

Wenn Sie mit dem oberen und unteren Rand bleiben möchten, können Sie das folgende Stück von CSS:

margin: 5px 10px; 

Dies wird den oberen und unteren Rand auf 5px, und links und rechts Marge bis 10px.

Alternativ können Sie auch jeweils einzeln durch das folgende Verfahren an:

margin-top: 5px; 
margin-right: 10px; 
margin-bottom: 15px; 
margin-left: 0px; 

oder

margin: 5px 10px 15px 0px; 

beide mit dem gleichen Ergebnis.

Sie können hier mehr über Marge lesen: http://www.w3schools.com/css/css_margin.asp

Answer 2

Sie könnten versuchen, so etwas wie die folgenden:

.fa { 
    margin-right : 1em; 
} 

Dies wird den Rand der .fa Klasse 1em ändern, die Größe der font-size verwandt ist, die es dem Benutzer ermöglicht, zu ändern, wie sie wahrnehmen, Die Webseite.

Alternativ erklärt die verifizierte Antwort stattdessen px.

Answer 3

hinzufügen margin-right oder margin-left zu #contact i.fa. Überprüfen Sie den folgenden Code.

div#contact { 
 
    background-color: black; 
 
} 
 
#contact i.fa { 
 
    border: 2px solid #fff; 
 
    border-radius: 60px; 
 
    color: #fff; 
 
    display: inline-block; 
 
    height: 60px; 
 
    margin: 5px; 
 
    padding: 12px; 
 
    width: 60px; 
 
    margin-top: 60px; 
 
    margin-left: 60px; 
 
} 
 
#contact i:first-child { 
 
    margin-left: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div id="contact"> 
 
    <i class="fa fa-envelope-o custom1 fa-2x"></i> 
 
    <i class="fa fa-phone custom2 fa-2x"></i> 
 
</div>