Удалите пустое пространство над и под большим текстом в элементе встроенного блока

Ответ 1

Похоже, что вам нужно явно установить шрифт и изменить line-height и height мере необходимости. Предполагая, что "Times New Roman" является шрифтом вашего браузера по умолчанию:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}

<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>
<span>
    BIG TEXT
</span>

Ответ 2

Браузер не добавляет никаких отступов. Вместо этого буквы (даже заглавные буквы) обычно значительно меньше в вертикальном направлении, чем высота шрифта, не говоря уже о высоте строки, которая обычно по умолчанию примерно в 1,2 раза больше высоты шрифта (размера шрифта).

Там нет общего решения этого, потому что шрифты разные. Даже для фиксированного размера шрифта высота буквы зависит от шрифта. И заглавные буквы не должны иметь одинаковую высоту в шрифте.

Практические решения могут быть найдены экспериментально, но они неизбежно зависят от шрифта. Вам нужно будет установить высоту строки существенно меньше, чем размер шрифта. Следующее, похоже, дает желаемый результат в разных браузерах Windows для шрифта Arial:

span.foo
{
  display: inline-block;
  font-size: 50px;
  background-color: green;
  line-height: 0.75em;
  font-family: Arial;
}

span.bar
{
  position: relative;
  bottom: -0.02em;
}

<span class=foo><span class=bar>BIG TEXT</span></span>

Ответ 3

Я дизайнер, и у наших разработчиков была эта проблема при работе с Android на начальном этапе, и у наших веб-разработчиков возникла та же проблема. Мы обнаружили, что интервал между строкой текста и другим объектом (или компонентом, подобным кнопке, или отдельной строкой текста), который выдает программа дизайна, является неправильным. Это связано с тем, что программа проектирования не учитывает диакритические знаки, когда она определяет "размер" одной строки текста.

Мы закончили тем, что добавили Êg к каждой строке текста и вручную создали разделители (маленькие синие прямоangularьники), которые выступают в качестве "измерения" от фактической вершины текста (то есть от вершины знака акцента на E) или от спусковое устройство (дно "г"). Например, скажем, у вас действительно скучная верхняя навигация, которая представляет собой просто прямоangularьник и заголовок под ним. Программа дизайна скажет, что пространство между нижней частью верхней панели навигации и верхней частью заголовка текстового поля 24px. Однако, когда вы измеряете от нижней части навигационной панели до верха знака акцента, интервал фактически составляет 20 пикселей.

Хотя я понимаю, что это не кодовое решение, оно должно помочь объяснить несоответствия между спецификациями проекта и тем, как выглядит сборка.

Ответ 4

У меня была аналогичная проблема. По мере увеличения высоты линии пространство над текстом увеличивается. Это не дополнение, но это повлияет на вертикальное пространство между контентом. Я обнаружил, что добавление верхнего края поля показало, что это трюк. Это должно было быть сделано для всех разных экземпляров строки-высоты, и это также зависит от семейства шрифтов. Может быть, это то, что дизайнеры должны лучше знать при прохождении требований к дизайну (?) Итак, для конкретного экземпляра семейства шрифтов и высоты строки:

h1 {
    font-family: 'Garamond Premier Pro Regular';
    font-size: 24px;
    color: #001230;
    line-height: 29px;
    margin-top: -5px;    /* CORRECTION FOR LINE-HEIGHT */
}

Ответ 5

Если его текст должен масштабироваться пропорционально ширине экрана, вы также можете использовать шрифт в качестве SVG, вы можете просто экспортировать его из чего-то вроде иллюстратора. Я должен был сделать это в моем случае, потому что я хотел выровнять верхнюю часть левой и правой границы с верхом шрифта | TEXT | , Используя высоту строки, текст будет прыгать вверх и вниз при масштабировании окна.

Ответ 6

Меня часто это раздражало. Vertical-align будет работать только на дне и в центре, но никогда не будет сверху!: - (

Кажется, я, возможно, наткнулся на решение, которое работает как для элементов таблицы, так и для свободных элементов абзаца. Надеюсь, что мы, по крайней мере, говорим о подобной проблеме.

CSS

p {
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    background: #FFFFFF;
    margin: 0
    margin-top: 3px;
    margin-bottom: 10px;
}

Для меня настройки полей отсортированы независимо от того, где я помещаю свой код "p > .../p > ".

Надеюсь, что это поможет...