CSS Как я могу сместить первую букву без отрицательного поля?

Question

Я просто макетирую страницу для практики, чтобы посмотреть, что я смогу найти самостоятельно.

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

Текст смещается при использовании поля -1.0em.Каков наилучший способ сделать это?Я довольно новичок в веб-разработке, так что будьте спокойны!

p::first-letter {
  font-family: 'Cedarville Cursive';
  font-size: 2.0em;
  margin-left: -1.0em;
  text-transform: uppercase;
}

<div id="bodyWrap">

  <h1 id="header" class="underline">Placeholder</h1>

  <hr>
  <p>Some more placeholder text </p>

  <p>Some more placeholder text </p>

  <p>Some more placeholder text </p>

  <hr>

  <footer>Placeholder</footer>

</div>

Желаемым результатом будет смещение первой буквы в каждом абзаце в сторону, не влияя на размещение абзаца.

Answer 1

Псевдоэлемент ::first-letter применяется к первой букве элемента, но не удаляет его из обычного потока и не переносит букву в отдельный выбираемый элемент.

Это означает, что вы можете изменить типографское и некоторые другие качества ( список ) буквы, но вы не можете переместить его, не перемещая также весь элемент.

Если вы хотите сместить букву, создайте вложенный контейнер и используйте относительное позиционирование. Затем используйте свойства смещения CSS (top, bottom left и right), чтобы расположить букву.

p > span {
  font-family: 'Cedarville Cursive';
  font-size: 2.0em;
  text-transform: uppercase;
  position: relative;
  top: -5px;
  left: -5px;
  
}

<p><span>P</span>ositioning only the first letter.</p>

Answer 2

Вы можете использовать межбуквенный интервал :

    p::first-letter {
      font-family: 'Cedarville Cursive';
      font-size: 2.0em;          
      text-transform: uppercase;
      letter-spacing: 5px;
    }

    <div id="bodyWrap">
      <h1 id="header" class="underline">Placeholder</h1>
      <hr>
      <p>Some more placeholder text </p>
      <p>Some more placeholder text </p>
      <p>Some more placeholder text </p>
      <hr>
      <footer>Placeholder</footer>
    </div>

Answer 3

Вы можете использовать псевдоэлемент, чтобы использовать эту букву как элемент, который вы можете стилизовать самостоятельно:

p {
  margin: 50px;
  position: relative;
}

p::first-letter {
  opacity: 0;
}

p::before {
  content: attr(data-lettre);
  display: inline-block;
  position: absolute;
  margin-left: -20px;
  margin-top: -20px;
  font-size: 30px;
  font-weight: bold;
  font-family:arial;
}

<p data-lettre="L">
  Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume
</p>

И если вы хотите использовать first-letter, вы можете настроить интервал следующим образом.

Поскольку мы имеем дело с текстом, вы не можетев этом случае движение вверх / вниз

p {
  margin: 50px;
  position: relative;
}

p::first-letter {
  margin-left:-1em;
  margin-right:1em; /*add the same as the margin-left*/
  font-size: 2.0em;
  text-transform: uppercase;
  font-family:arial;
}

<p>
  Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume
</p>