Как сделать отступ

Question

вопрос может быть банален, но решения так и не нашел, padding не подойдет так как мне нужен отступ лишь одного слова, margin не возможно применить.

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

Бросаю код, надеюсь поможет понять суть, но к сожалению не могу загрузить шрифт на сайт.

Мне нужно переместить первое слово примерно на одну букву влево, как это сделать?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .title {
            width: 100vw;
            display: flex;
            justify-content: center;
        }
        
        .title h2 {
            font-weight: normal;
            font-size: 50px;
            line-height: 65px;
            text-align: center;
        }
        
        .title span {
            font-family: Book Antiqua;
            font-style: normal;
            font-weight: normal;
            font-size: 50px;
            line-height: 36px;
            letter-spacing: 0.13em;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
    <div class="title">
        <h2>Организация<br><span>мероприятий</span></h2>
    </div>
</body>

</html>

Answer 1

Специально для этого случая придумали свойство text-indent:

div {
  text-indent: 2em;
}

<div>
  Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...
  Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...
  Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...
  Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...
</div>

Answer 2

display: block для span и будет работать margin

Answer 3

Может так?

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title span:nth-child(1) {
  transform: translateX(10px);
}

<h1 class="title">
  <span>Организация</span>
  <span>мероприятий</span>
</h1>

БЛОГ НА HUSL

Как сделать отступ

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