CSS如何在没有负边距的情况下偏移第一个字母？答案

【问题标题】：CSS How can I offset the first letter without negative margin?CSS如何在没有负边距的情况下偏移第一个字母？
【发布时间】：2018-05-17 19:06:34
【问题描述】：

我只是在模拟一个页面进行练习，看看我自己能找到什么。

我的目标是用不同的字体将所有段落的第一个字母向左偏移，但这给我带来了麻烦。

使用 -1.0em 边距时，文本最终会错位。实现这一目标的最佳方法是什么？我是 Web 开发的新手，所以请放轻松！

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>

理想的结果是在不影响段落位置的情况下将每个段落中的第一个字母推到一边。

【问题讨论】：

想要的输出是什么，你的 HTML 是什么样的？
偏移量是什么意思？

标签： css css-selectors

【解决方案1】：

您可以使用伪元素将该字母作为您可以单独设置样式的元素：

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>

【讨论】：

谢谢！这在很大程度上解决了它。我只需要对字体大小进行一些调整，以使其间距适合我的模型。

【解决方案2】：

你可以使用letter-spacing:

    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>

【讨论】：

你的答案中有所有需要的代码，那么为什么不简单地创建一个 sn-p 并摆脱 jsfiddle 呢？

【解决方案3】：

::first-letter 伪元素适用于元素的第一个字母，但它不会将其从正常流程中移除，也不会将字母包装在单独的可选元素中。

这意味着您可以更改字母的排版和其他一些品质 (list)，但您不能在不移动整个元素的情况下移动它。

如果要偏移字母，请创建一个嵌套容器并使用相对定位。然后使用 CSS 偏移属性（top、bottom、left 和 right）来定位字母。

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

&lt;p&gt;&lt;span&gt;P&lt;/span&gt;ositioning only the first letter.&lt;/p&gt;

【讨论】：