Четкое позиционирование текста относительно других объектов / Пустоты в текстовом блоке

Question

Когда-то давно видел уже решение данного вопроса, но сейчас, перегуглив разными формулировками пол интернета, мне так и не удалось найти ответ.

Суть проблемы:

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

Пример:

body {
  overflow: hidden;
}

.container {
  margin: 30vh;
  display: flex;
}

svg {
  width: 100px;
  height: 100px;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 120px;
  margin: 0;
  padding: 0;
}

<div class="container">
  <svg svg version="1.1" id="blackrect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
            <rect width="100" height="100"/>
   </svg>
  <p>
    Круто
  </p>
</div>

Как мы видим, слово "Круто" съехало вниз относительно квадрата, так как "физический" блок, занимаемый текстом, больше, чем svg.

Есть какой-то параметр в css, с помощью которого можно уменьшить высоту "физического" блока, никак не воздействуя на отображение текста?

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

Answer 1

Если я вас правильно понял и вам нужно букву "К" на уровне квадрата слева, то нужно line-height указать нужный.

body {
    overflow: hidden;
}
.container {
    margin: 30vh;
    display: flex;
}

svg {
    width: 100px;
    height: 100px;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 120px;
    margin: 0;
    padding: 0;
    background-color: blue;
    line-height: 0.74;
    line-height: 88px;
}

<div class="container">
    <svg svg version="1.1" id="blackrect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
        <rect width="100" height="100"/>
    </svg>
    <p>
        КЁЙуто
    </p>
</div>

БЛОГ НА HUSL

Четкое позиционирование текста относительно других объектов / Пустоты в текстовом блоке

Ответы (1 шт):