Вопросы Теги

Как учесть встроенные отступы / поля текста с помощью CSS

Вы можете сделать cherry-pick, если добавить второе репо как удаленное к первому (а затем fetch).

0
задан dgknca 18 March 2019 в 19:04
поделиться

2 ответа

Проблема в том, что большинство шрифтов пропускают заглавные буквы или буквы типа 'p', поэтому вы не можете просто сделать это автоматически

Решение состоит в том, чтобы установить line-height в ноль и вручную свойство margin, в моем случае это было 2vw, вот пример 

body
{
   font-family: sans-serif;
   display: flex;
   margin: 0;
   height: 100vh;
   flex-direction: column;
}
.block
{
   flex: 1;
}
.first
{
   background: black;
   color: #fff;
   display: flex;
   align-items: flex-end;
   font-size: 3vw;
   line-height: 0;
   
   justify-content: center;
}
.first h1
{
  margin: 2vw;
}
.second
{
   font-size: 5vw;
   display: flex;
   justify-content: center;
}
<div class="block first">
   <h1>Sample text</h1>
</div>
<div class="block second">
   <h1>Sample Text</h1>
</div>

0
ответ дан ishidex2 18 March 2019 в 19:04
поделиться

Старайтесь уменьшать свойство текста line-height до тех пор, пока не достигнете правильной высоты текста.

0
ответ дан Pablo Darde 18 March 2019 в 19:04
поделиться