溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css如何設(shè)置p段落上下間距距離

發(fā)布時(shí)間：2022-03-08 14:07:27 來(lái)源：億速云 閱讀：1213 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了css如何設(shè)置p段落上下間距距離，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

運(yùn)用p高低分段落的排版，凹凸段落間距如何設(shè)置裝備擺設(shè)？

html p與p段落之間有空行間距默認(rèn)是有定距離，那末這個(gè)間距是margin-top與margin-bottom默認(rèn)值，同時(shí)與line-height相干。

1、line-height調(diào)解p間距
那么調(diào)處p與p凹凸間距，在line-height設(shè)置大約調(diào)停。

p{ line-height:30px}

設(shè)置裝備擺設(shè)了筆墨上下行間距，同時(shí)即可調(diào)解排遣p高低間距。

2、margin-top和margin-bottom調(diào)停p標(biāo)簽高低間距

p{margin-top:10px;margin-bottom:10px}

經(jīng)由對(duì)p設(shè)置裝備擺設(shè)margin-top和margin-bottom，從而來(lái)設(shè)置扭轉(zhuǎn)p段落高低間距。

3、p上下間距CSS HTML實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p段落上下間距隔絕距離配置實(shí)例 CSS5</title>
<style>
.abc{ line-height:20px; text-align:left}
.p-a p{ margin-top:30px; margin-bottom:30px}
.p-b p{ margin-top:60px; margin-bottom:60px}
</style>
</head>
<body>
<div class="abc">
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
</div>

<div class="abc p-a"> <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </div>

<div class="abc p-b"> <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </div> </body> </html>

經(jīng)過(guò)class=p-a和 class=p-b設(shè)置裝備擺設(shè)margin-top和margin-bottom竄改實(shí)現(xiàn)p上下間距設(shè)置。

css如何設(shè)置p段落上下間距距離

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何設(shè)置p段落上下間距距離”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手