Возможно ли сделать символ большим, не увеличив при этом пустое пространство внутри контейнера?

#html #css

Пытаюсь максимально простыми средствами сделать некую круглую "лампочку", для этого
в коде страницы написал •, а в CSS создал стиль .lamp {font-size:300%;}. Проблема в
том, что чем больше становится "лампочка", тем больше "раздувается" ее контейнер, плюс
съезжает вертикальная ориентация с соседним текстом. Как лучше всего сделать подобный трюк?

Картинка http://puu.sh/mNKim/99011932b4.png
    

Ответы

Ответ 1

Достаточно задать высоту линии.

.lamp {
    font-size: 16px;
    line-height: 16px;
}


"Раздувает" именно line-height, корректировать нужно его.


Ответ 2

Чтобы контейнер не "раздувался" ему нужно указать фиксированную высоту.
Вот пример:



.container {
  height: 50px;
  border: 1px solid #000;
  border-radius: 3px;
}

.lamp {
  font-size: 50px;
  vertical-align: middle;
}

  Текстовое • сообщение