首頁 > web前端 > css教學 > css如何使用內邊距來調整段落間距? (程式碼實例)

css如何使用內邊距來調整段落間距? (程式碼實例)

青灯夜游
發布: 2018-10-10 14:38:44
原創
4002 人瀏覽過

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>
登入後複製

效果圖:

css如何使用內邊距來調整段落間距? (程式碼實例)

2、使用padding- top和padding-bottom,單獨設定段落的上間距和下間距

<!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影片教學

相關建議:

php公益訓練影片教學

#css如何設定行間距? css文字文字的行間距設定(程式碼實例)

css如何設定文字間距? word-spacing屬性與letter-spacing屬性的簡單比較#

以上是css如何使用內邊距來調整段落間距? (程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板