Как сделать нормальный цветовой фон строке в HTML, CSS?

Luver, 229 просмотров

Допустим у нас есть некоторый элемент (div или span), содержащий немного текста, в одну строку. Как добиться того, чтобы можно было задать цвет фона этого элемента, чтобы границы заливки четко совпадали с верхними и нижними границами буков?

Игра с line-height ни к чему хорошему не приводит :)

Ответы:

BrotheRRus

ппц затупил над вопросом и тоже ничего не получилось) кинь под дивчик бекраундом картинку высотой в нужное кол-во пикселей)

foGa

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div { font-size: 40px; line-height: 28px; background-color: #0f0; padding: 0; float: left; }
</style>
</head>
<body>
<div>Text</div>
</body>
</html>

germani

<offtop>
line-height не стоит делать в пикселях т.к. при изменении font-size line-height останется на том же уровне
лучше делать без размеров т.е 1 или 1.1 1.2 и т.д
</offtop>

Xel

если ты изучишь как делаются шрифты, то поймешь что "верхняя и нижняя граница буков" для шрифта несколько отлична, от границы по крайним пикселям на рендере. Поэтому ровно можно сделать только для конкретной строки, тупо откусывая ненужные пиксели. (
решение foGa скажем сыпется при использовании строки без выпирающих символов (mama или area например)

13 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.