css怎么使用內(nèi)邊距來調(diào)整段落間距

發(fā)布時(shí)間：2020-09-14 11:22:53 來源：億速云閱讀：144 作者：小新欄目：web開發(fā)

小編給大家分享一下css怎么使用內(nèi)邊距來調(diào)整段落間距，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

首先我們來了解一下如何設(shè)置css的內(nèi)邊距？

css的內(nèi)邊距的設(shè)置其實(shí)很簡單，使用css padding屬性就可以實(shí)現(xiàn)，下面我們來簡單介紹一下這個(gè)屬性：

padding：一個(gè)簡寫屬性，可以同時(shí)設(shè)置元素的所有內(nèi)邊距；可以有 1 到 4 個(gè)值，不允許使用負(fù)值。

說明：

padding屬性設(shè)置元素所有內(nèi)邊距的寬度，或者設(shè)置各邊上內(nèi)邊距的寬度。行內(nèi)非替換元素上設(shè)置的內(nèi)邊距不會影響行高計(jì)算；因此，如果一個(gè)元素既有內(nèi)邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內(nèi)容重疊。元素的背景會延伸穿過內(nèi)邊距。不允許指定負(fù)邊距值。

舉個(gè)小例子：

padding:10px 5px 15px 20px;

padding設(shè)置了上內(nèi)邊距是 10px，右內(nèi)邊距是 5px，下內(nèi)邊距是 15px，左內(nèi)邊距是 20px。

css的內(nèi)邊距也可以不使用padding的簡寫方式，同時(shí)設(shè)置元素的所有內(nèi)邊距；我們可以單獨(dú)設(shè)置一個(gè)邊距，那么我們來看看單獨(dú)設(shè)置內(nèi)邊距的屬性：

padding-top：上方內(nèi)邊距

padding-right：右邊內(nèi)邊距

padding-bottom：下方內(nèi)邊距

padding-left：左邊內(nèi)邊距

下面我們通過簡單的代碼示例，為大家詳細(xì)解說用內(nèi)邊距來設(shè)置和調(diào)整段落間距的實(shí)現(xiàn)方法！

1、使用padding的簡寫方式，同時(shí)設(shè)置上下的段落間距

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>內(nèi)邊距 調(diào)整 段落間距</title>
<style>
.a1{
padding: 20px 0px;
}
</style>
</head>
<body>
<p>第一段，沒有設(shè)置段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
<p>第二段，沒有設(shè)置段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
<p class="a1">第三段，設(shè)置上下段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
<p>第四段，沒有設(shè)置段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
<p>第五段，沒有設(shè)置段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
</body>
</html>

效果圖：

css怎么使用內(nèi)邊距來調(diào)整段落間距

2、使用padding-top和padding-bottom，單獨(dú)設(shè)置段落的上間距和下間距

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>內(nèi)邊距 調(diào)整 段落間距</title>
		<style>
			*{margin: 0px;padding: 0px;}
			.a1{
				padding-top: 20px;
			}
			.a2{
				padding-bottom: 20px;
			}
		</style>
	</head>
	<body>
	    <p>第一段，沒有設(shè)置段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
	    <p>第二段，沒有設(shè)置段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
	    <p class="a1">第三段，設(shè)置上段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
	    <p class="a2">第四段，設(shè)置下段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
	    <p>第五段，沒有設(shè)置段落間距。我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！我是一段測試代碼！</p>
	</body>
</html>

效果圖：

css怎么使用內(nèi)邊距來調(diào)整段落間距

以上是css怎么使用內(nèi)邊距來調(diào)整段落間距的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css怎么使用內(nèi)邊距來調(diào)整段落間距

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽