Kevin Aartsen Kevin Aartsen - 6 months ago 12
HTML Question

Space between inline displayed items

I have a div with 2 font awesome icons displayed inline.
What i'd like to achieve is to add more space between them 2.

This is how it is now:

enter image description here

This is the 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>


And the 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;
}

Answer

Changing your margin would increase the space between the objects.

margin: 10px;

If you want to stick with the top and bottom margin, you can use the following piece of CSS:

margin: 5px 10px;

This will set the top and bottom margin to 5px, and left and right margin to 10px.

Alternatively, you can specify each individually through the following method:

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

or

margin: 5px 10px 15px 0px;

both with the same result.

You can read more about margin here: http://www.w3schools.com/css/css_margin.asp

Comments