Пытаюсь максимально простыми средствами сделать некую круглую "лампочку", для этого в коде страницы написал •, а в CSS создал стиль .lamp {font-size:300%;}. Проблема в том, что чем больше становится "лампочка", тем больше "раздувается" ее контейнер, плюс съезжает вертикальная ориентация с соседним текстом. Как лучше всего сделать подобный трюк?
2 ответа
Достаточно задать высоту линии.
.lamp {
font-size: 16px;
line-height: 16px;
}
"Раздувает" именно line-height, корректировать нужно его.
-
Спасибо, всё получилось. Добавил еще vertical-align:top; для выравнивания. – Keroronsk 29 янв '16 в 6:09
-
Чтобы контейнер не "раздувался" ему нужно указать фиксированную высоту. Вот пример:
.container {
height: 50px;
border: 1px solid #000;
border-radius: 3px;
}
.lamp {
font-size: 50px;
vertical-align: middle;
}
<div class="container">
Текстовое <span class="lamp">•</span> сообщение
</div>