显示没有任何空格的图像和文本

Question

我试图在图片旁边显示文字。他们正在展示，但有空格，并且它们并不相邻。 这是代码：

 .footer{
    font-family:Arial;
    background-color:white;
  }

 <div class=footer>Body Lab Gym © 2016
   <img src="icons/iconfb.png"><img src="icons/iconfb.png"  class="social">
   <img src="icons/iconfb.png">
   <img src="icons/iconfb.png">
   <img src="icons/iconfb.png"> Designed by:<br><br><br>
 </div>

这是我得到的结果

Answer 1

看来你的图标周围有很多白色或透明的空间。商标。使用图像编辑器将其删除。

此外，添加CSS规则footer img { vertical-align: middle; }以使您的文字和图片位于同一轴“＃”，即i。即垂直居中。

Answer 2

您需要将边距/填充设置为0.将它们中的每一个放在同一个类中：

 <img class="noSpace" src="icons/iconfb.png"><img src="icons/iconfb.png"  class="social">
 <img class="noSpace" src="icons/iconfb.png">
 <img class="noSpace" src="icons/iconfb.png">
 <img class="noSpace" src="icons/iconfb.png"> Designed by:<br><br><br></div>

并使用css将边距/填充设置为0

.noSpace{
margins: 0 px;
padding: 0px;
}