Отображение изображений и текста без пробелов

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

Кажется, ваши значки имеют много белого или прозрачного пространства вокруг логотипа «F». Используйте редактор изображений, чтобы удалить его.

Также добавьте правило 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; 
}