css如何使用內邊距來調整段落間距？ （程式碼實例）
- 青灯夜游原創
- 2018-10-10 14:31:094024瀏覽
css如何設定段落間距？在之前的文章【css如何設定段落間距？ margin 屬性設定段落間距（程式碼實例）】中我們介紹了css使用外邊距來設定和調整段落間距，本章我們就給大家介紹css如何使用內邊來設定和調整段落間距。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
首先我們來了解如何設定css的內邊距？
css的內邊距的設定其實很簡單，使用css padding屬性就可以實現，下面我們來簡單介紹一下這個屬性：
##padding ：一個簡寫屬性，可以同時設定元素的所有內邊距；可以有1 到4 個值，不允許使用負值。
說明：
padding屬性設定元素所有內邊距的寬度，或設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。 舉個小例子：padding:10px 5px 15px 20px;padding設定了上內邊距是 10px，右內邊距是 5px，下內邊距是 15px，左內邊距是 20px。 css的內邊距也可以不使用padding的簡寫方式，同時設定元素的所有內邊距；我們可以單獨設定一個邊距，那麼我們來看看單獨設定內邊距的屬性： padding-top：上方內邊距padding-right：右邊內邊距padding-bottom：下方內邊距padding- left：左邊內邊距下面我們透過簡單的程式碼範例，為大家詳細解說用內邊距來設定和調整段落間距的實作方法！ 1、使用padding的簡寫方式，同時設定上下的段落間距
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内边距 调整 段落间距</title>
<style>
.a1{
padding: 20px 0px;
}
</style>
</head>
<body>
<p>第一段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第二段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p class="a1">第三段，设置上下段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第四段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第五段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
</body>
</html>效果圖：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内边距 调整 段落间距</title>
<style>
*{margin: 0px;padding: 0px;}
.a1{
padding-top: 20px;
}
.a2{
padding-bottom: 20px;
}
</style>
</head>
<body>
<p>第一段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第二段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p class="a1">第三段，设置上段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p class="a2">第四段，设置下段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第五段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
</body>
</html>效果圖：
CSS影片教學！
相關建議：#css如何設定行間距？ css文字文字的行間距設定（程式碼實例）
css如何設定文字間距？ word-spacing屬性與letter-spacing屬性的簡單比較#
以上是css如何使用內邊距來調整段落間距？ （程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn