明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線(xiàn)學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

在HTML里p段落行高行距如何設(shè)置

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

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

1、css line-height

2、margin

3、padding

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

1、css文字行間距

2、css 字間距

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

css+div案例描述,為了觀察到效果,我們?cè)O(shè)置四個(gè)DIV 盒子對(duì)象,分別里面加入p段落,同時(shí)對(duì)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。同時(shí)對(duì)p文字line-height設(shè)置為20px

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

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距實(shí)例 在線(xiàn)演示</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作用)

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

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

1、完整的html源代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距實(shí)例 在線(xiàn)演示</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>

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

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

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

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

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

1、完整實(shí)例HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距實(shí)例 在線(xiàn)演示 </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,然后我們?cè)O(shè)置padding-toppadding-bottom值為20px。

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

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

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

1、完成DIV CSS實(shí)例代碼:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距實(shí)例 在線(xiàn)演示 </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)樣式。

對(duì)于P段落的介紹就這么多,更多精彩請(qǐng)關(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)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!


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