明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

在HTML里p段落行高行距怎么設(shè)置

發(fā)表時間：2024-05-11 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]怎么樣設(shè)置p段落之間的上下間距？哪些樣式能夠控制<p>之間行距距離呢？css行高怎么寫？今天我們來把這個P段落研究個明明白白，讓大家徹底掌握p行距行高樣式。那么我們?yōu)榇蠹医榻B如何通過CSS樣式設(shè)置p段落上下行距，而p是文章段落標(biāo)簽，控制p段落行距的css div屬性有：1、css li...
怎么樣設(shè)置p段落之間的上下間距？哪些樣式能夠控制<p>之間行距距離呢？css行高怎么寫？今天我們來把這個P段落研究個明明白白，讓大家徹底掌握p行距行高樣式。

那么我們?yōu)榇蠹医榻B如何通過CSS樣式設(shè)置p段落上下行距，而p是文章段落標(biāo)簽，控制p段落行距的css div屬性有：

1、css line-height

2、margin

3、padding

相關(guān)與間距行距教程

1、css文字行間距

2、css 字間距

因為p之間上下距離實現(xiàn)使用margin樣式和padding決定，而line-height也有一定關(guān)系。接下來通過實例方法為大家介紹p段落之間行距，通過css實例掌握對p行距設(shè)置。

css+div案例描述，為了觀察到效果，我們設(shè)置四個DIV 盒子對象，分別里面加入p段落，同時對p段落設(shè)置不同的行距觀察他們效果，提供效果找出規(guī)律從而掌握css設(shè)置p行距。

命名分別為".div-a"、".div-b"、".div-c"、".div-d"

在p段落標(biāo)簽?zāi)J(rèn)樣式中，padding的值默認(rèn)為0。同時對p文字line-height設(shè)置為20px

案例一、對margin上下設(shè)置為0

1、完整css+div html代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距實例 在線演示</title> 
<style> 
p{ line-height:20px} 
.div-a p{ margin:0 auto} 
</style> 
</head> 
<body> 
<div class="div-a"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

設(shè)置margin-top為0,margin-bottom為0,（了解margin auto作用）

通過以上實例觀察出如果將margin-top和margin-bottom的值設(shè)置為0，那么p段落行距就不存在了，效果就與line-height設(shè)置行距相同了。

案例二、對margin上下設(shè)置為30px

1、完整的html源代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距實例 在線演示</title> 
<style> 
p{ line-height:20px} 
.div-b p{ margin:30px auto} 
</style> 
</head> 
<body><div class="div-b"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

這里對對象".div-b"設(shè)置了CSS margin:30px auto相當(dāng)于設(shè)置margin-top為30px、margin-bottom為30px

通過多margin設(shè)置調(diào)節(jié)行距

通過多margin設(shè)置調(diào)節(jié)行距

從以上案例我們可以看出通過margin設(shè)置可以實現(xiàn)p段落行距。

案例三、對margin上下設(shè)置為0,padding上下為20px

1、完整實例HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距實例 在線演示 </title> 
<style> 
p{ line-height:20px} 
.div-c p{ margin:0 auto; padding:20px 0} 
</style> 
</head> 
<body> 
<div class="div-c"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

以上設(shè)置了margin-top和margin-bottom均為0，然后我們設(shè)置padding-top和padding-bottom值為20px。

通過以上案例可以看出對p設(shè)置padding樣式依然可以實現(xiàn)行距間距設(shè)置。

案例四、我們不設(shè)置margin也不設(shè)置padding樣式

我們不對p設(shè)置margin樣式和padding樣式，意思就對p不設(shè)置樣式看看默認(rèn)P樣式行距效果。

1、完成DIV CSS實例代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距實例 在線演示 </title> 
<style> 
p{ line-height:20px} 
.div-d p{ } 
</style> 
</head> 
<body> 
<div class="div-d"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

不設(shè)置樣式即體現(xiàn)p默認(rèn)樣式。

對于P段落的介紹就這么多，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

html中的label標(biāo)簽使用方法

HTML標(biāo)題標(biāo)簽元素怎么修改

DIV背景圖片background的設(shè)置方法

以上就是在HTML里p段落行高行距怎么設(shè)置的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。