内联显示项之间的空格

Question

我有一个div对象，内嵌显示两个Font Awesome图标。 我想要实现的是在两个图标之间添加更多空间。

这就是目前的样子：

这是相关的HTML：

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

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 1

您可以尝试以下内容：

.fa {
  margin-right : 1em;
}

这会将.fa类的边距更改为1em，其大小与字体大小相关，允许用户更改他们对网站的感知方式。

或者，经过验证的答案解释了使用px。

Answer 2

更改边距会增加对象之间的空间。

margin: 10px;

如果你想坚持上下边距，你可以使用下面的CSS：

margin: 5px 10px;

这会将上下边距设置为5px，左右边距设置为10px。

或者，您可以通过以下方法单独指定每个：

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

或

margin: 5px 10px 15px 0px;

两者都有相同的结果。

您可以在此处详细了解保证金：http://www.w3schools.com/css/css_margin.asp

Answer 3

将import os os.system('gdalwarp -ot Float32 -s_srs EPSG:32630 -t_srs EPSG:3035 -r near -of GTiff /home/giacomo/Scrivania/provas/cccp.dat /home/giacomo/Scrivania/provas/cccp_qgs2.tif') 或margin-right添加到margin-left。检查以下代码。

#contact i.fa

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