При включении текста в div я обнаружил небольшое преимущество над текстом. Как избавиться от поля?Почему в верхней части текста есть поле?
<html>
<style>
\t #box{
\t \t width:200px;
\t \t height:100px;
\t \t font-size:50px;
\t \t background-color:#ff0000;
\t \t color:#ffffff;
\t }
</style>
<body>
<div id="box">TEXT</div>
</body>
</html><html>
<style>
\t #box{
\t \t width:200px;
\t \t height:100px;
\t \t font-size:50px;
\t \t background-color:#ff0000;
line-height:38px; /* reduce line height for desired results */
\t \t color:#ffffff;
\t }
</style>
<body>
<div id="box">TEXT</div>
</body>
</html>То же, что и для другого ответа, установка высоты строки на значение, меньшее размера шрифта, может привести к потере некоторого фактического текста. Используйте осторожно. – GolezTrol
Абсолютно. Я бы сказал, если вы настроите линейную высоту, как это, вы должны, вероятно, пересмотреть весь свой подход. Это будет иметь очень неприятные эффекты, если ваш текст когда-либо начнет обертываться. – CollinD
Вы должны изменить line-height. У меня здесь нет места.
#box{
width:200px;
height:100px;
font-size:50px;
line-height: 33px;
background-color:#ff0000;
color:#ffffff;
}
Обратите внимание, что это не то, что вы можете делать вслепую. Это связано с шрифтом. Когда вы делаете высоту линии меньше размера шрифта, изменения вы потеряете часть текста. Он может соответствовать именно этому шрифту на этом устройстве, но другое устройство может отображать его несколько иначе или может вернуться к другому шрифту, и вы можете потерять слишком много текста. Не большая проблема, может быть, но что-то, чтобы принять во внимание, и что-то вроде этого должно предупредить. – GolezTrol
Да, полностью согласен. Лучшим подходом было бы иметь текст в своем собственном элементе, а затем манипулировать его положением. Если этот текст будет продолжен на новой строке, он будет перекрываться и выглядеть ужасно. –
Вы можете использовать line-height действительно сократить разрыв сверху и под текстом, но, возможно, вы должны использовать em значения, чтобы это более надежным.
#box {
width: 200px;
height: 100px;
font-size: 50px;
background-color: #ff0000;
line-height: 0.65em;
color: #ffffff;
box-shadow: 0 0 3px black;
}
div:hover {
font-family: courier;
}
span {
vertical-align: top;
font-family: courier;
}<div id="box">TEXT<span>text</span>
</div>
Пространство между верхней частью текста и красной коробке? Это естественная строка 'line-height' –