css - 首字母/大写字母的底线高度

Question

我正在做我的摄影网站元素，出于某种原因，我想为我的文本添加首字母/大写字母(法语中的 lettrine)。

我的代码是这个，它工作正常

p:first-child:first-letter 
{
    float:left;
    margin: 3px 3px 0 0;
    padding: 0 5px 0 0;
    line-height: 25px;  
    font-size: 50px;    
    color: rgb(255, 122, 0); 

}

问题是我在这个大写字母和第一个“常规行”下方有一个很大的空间(25 像素)，因为据我所知，这个 line-height 在 上同时应用这封信的顶部和底部。有什么办法可以适当控制这个高度吗？

我发现一些线程处理同一个事物之王，但似乎我必须进入负边际并且我不知道它是否是一个“干净”的解决方案。我应该查看 vertical-align 吗？

如果你到目前为止已经阅读了我，非常感谢!

一张图让你真正明白 my problem

Answer 1

试试这个...

我发现除了 ::first-letter CSS 属性之外，已经有一个支持首字下沉文本的 CSS 属性。

或者您仍然可以使用其他浏览器更支持的标准 CSS ::first-letter。

p {
  font-family: sans-serif;
  font-weight: 300;
  line-height: 1.3449;
  margin: 0 0 30px;
}

p.test-initial::first-letter {
  font-size: 32px;
  font-weight: bold;
  color: orange;
  margin-right: 5px;
  
  -webkit-initial-letter: 4;
          initial-letter: 4;
}

p.test-dropcap::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 45px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 0;
}

<p class="test-initial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat, urna vel aliquam facilisis, nisi augue dapibus arcu, faucibus fringilla arcu sapien nec sapien. Sed ac enim ac ligula rhoncus elementum. Curabitur id sem facilisis, semper est eget, posuere sem. Curabitur elementum dolor sed tortor malesuada, eu tempor nisi varius. Etiam lobortis, neque quis efficitur iaculis, nisi nibh rutrum sapien, non tempus dolor odio nec erat.</p>

<p class="test-dropcap"> Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas pellentesque pulvinar diam. Sed a efficitur ipsum, eu bibendum mauris. Curabitur suscipit nisi eget lacus imperdiet gravida. Aenean orci orci, sodales eget imperdiet id, ullamcorper in ante. Vivamus malesuada hendrerit iaculis. Etiam dignissim lacus turpis, vitae placerat tortor rhoncus at. Fusce porta nec tellus eget suscipit. Aenean pharetra justo mauris, non pretium nisi sollicitudin tempus.</p>