在HTML裡p段落行高行距怎麼設定-html教學-PHP中文網

在HTML裡p段落行高行距怎麼設定

php中世界最好的语言

發布： 2017-11-22 17:58:45

原創

15552 人瀏覽過

怎麼樣設定p段落之間的上下間距？哪些樣式能夠控制

之間行距距離呢？ css行高怎麼寫？今天我們來把這個P段落研究個明明白白，讓大家徹底掌握p行距行高樣式。

那麼我們為大家介紹如何透過CSS樣式設定p段落上下行距，而p是文章段落標籤，控制p段落行距的css div屬性有：

#1、css line-height

2、margin

3、padding

相關與間距行距教學

1、css文字行間距

#2、css 字間距

因為p之間上下距離實作使用margin樣式和padding決定，而line-height也有一定關係。接下來透過實例方法為大家介紹p段落之間行距，透過css實例掌握對p行距設定。

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

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

在p段落標籤預設樣式中， padding的值預設為0。同時對p文字line-height設定為20px

案例一、對margin上下設定為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>

登入後複製

設定margin-top為0,margin-bottom為0,（了解margin auto作用）

透過上述實例觀察出如果將margin-top和margin-bottom的值設定為0，那麼p段落行距就不存在了，效果就與line-height設定行距相同了。

案例二、對margin上下設定為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"設定了CSS margin:30px auto相當於設定margin-top為30px、margin-bottom為30px

透過多margin設定調節行距

#從上述案例我們可以看出透過margin設定可以實現p段落行距。

案例三、對margin上下設定為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>

登入後複製

以上設定了margin-top和margin-bottom均為0，然後我們設定padding-top和padding-bottom值為20px。

透過上述案例可以看出對p設定padding樣式依然可以實現行距間距設定。

案例四、我們不設定margin也不設定padding樣式

我們不對p設定margin樣式和padding樣式，意思就對p不設定樣式看看預設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>

登入後複製

不設定樣式即體現p預設樣式。

對於P段落的介紹就這麼多，更多精彩請關注php中文網其它相關文章！