通过删除顶部和底部的空格来在段落中添加行高 [英] Add line-height in paragraph by removing space from top and bottom

问题描述

我正在尝试使用CSS在段落中添加行高.下面是我的html

I am trying to add the line-height in the paragraph using css. below is my html

<div>
    <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad
       eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu autem nostr overterem. 
       Ne etiam detraxit adversarium eam, rebum epicurei ea ius. Appareat lucilius
       invenire duo eu, an enim oportere duo, vidisse quaerendum at duo.
    </p>
</div>

这是我简单的CSS

p {
  line-height: 5.5em;
  background-color:#ccc;
}

它增加了适当的行高，但是我想删除下面这张图中标记为粉红色的顶部和底部的空间.

it adds proper line height, but I wanted to remove the space from top and bottom marked pink in this below image.

有人可以帮我吗?

推荐答案

您可以使用一些负边距对此进行近似，但是如果您更改行高，则必须对其进行调整:

You can approximate this using some negative margin but you have to adjust them if you change the line height:

p {
  line-height: 5.5em;
  background-color: #ccc;
}
div {
  overflow:hidden;
}
p::before {
  content:"";
  display:block;
  margin-top:-3em;
}

p::after {
  content:"";
  display:block;
  margin-bottom:-3em;
}

<div>
  <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu autem nostr overterem. Ne etiam detraxit adversarium eam, rebum epicurei ea ius. Appareat lucilius invenire
    duo eu, an enim oportere duo, vidisse quaerendum at duo.</p>
</div>

这篇关于通过删除顶部和底部的空格来在段落中添加行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！