当前位置: 首页 > 知识库问答 >
问题:

前端 - CSS怎么设置行间距?

雷锋
2023-10-08

line-height是设置行高,但是有一个问题,我不希望第一行的top和最后一行bottom也被影响,言外之意就是我只想设置段落内的间距,这该怎么做呢?

共有3个答案

秦才英
2023-10-08

行高其实就是为了调整行间距的,而从你的提问中:

言外之意就是我只想设置段落内的间距

那么我的理解就是,你想要设置的是段间距,每个段落之间的间距。
如果使用默认的 p 标签的话,会有 margin 来实现默认的段落间距,但同时,margin 属性存在一个合并计算的问题,这个是需要注意的。

段落间距说白了就是一个标签所包含的文本内容上下间距,那么可以考虑用 margin 或者 padding 来实现即可。

但如果你使用的是 p 标签,那么需要注意,p 标签是不能包含 p 标签,而 div 是可以的。

<p>这是一个错误    <p>的结构</p>,不能在里面包含 <code>p</code> 标签</p>
我不希望第一行的top和最后一行bottom也被影响

回到这个问题,如果只是一个段落中的第一行和最后一行,那么可以直接使用 margin-topmargin-bottom 来实现就可以。

p {    margin-top: 2em;    margin-bottom: 2em;}

需要注意的一个问题是 margin 合并的问题,可以参考:https://zhuanlan.zhihu.com/p/337857229

景元忠
2023-10-08
<body>    <div class="content">        <div class="top"></div>        <p class="text">line-height是设置行高,但是有一个问题,我不希望第一行的top和最后一行bottom也被影响,言外之意就是我只想设置段落内的间距,这该怎么做呢?</p>        <div class="bottom"></div>    </div></body><style>    .content {        width: 200px;    }    .top {        background: red;        height: 20px;    }    .bottom {        background: blue;        height: 20px;    }    .text {        line-height: 40px;        margin: -10px 0 ;    }</style>

image.png上一个回答的实现效果

邵绪
2023-10-08

<p> 包裹然后设置 <p>margin

 类似资料: