免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

css上下間距的設置方法-創新互聯

這篇文章主要介紹了css上下間距的設置方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創新互聯公司專注于川匯網站建設服務及定制，我們擁有豐富的企業做網站經驗。 熱誠為您提供川匯營銷型網站建設，川匯網站制作、川匯網頁設計、川匯網站官網定制、小程序設計服務，打造川匯網絡公司原創品牌,更為您提供川匯網站排名全網營銷落地服務。

css設置上下間距的方法：1、使用“line-height:間距值;”樣式來設置上下間距；2、使用margin-top和margin-bottom屬性來設置上下間距；3、使用padding-top和padding-bottom屬性來設置。

1、使用line-height屬性設置上下間距

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red;
			}
			.abc {
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<div >
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div><br>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

效果圖：


css上下間距的設置方法

2、使用margin-top和margin-bottom屬性來設置上下間距

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red;
			}
			.abc p {
				margin-top:50px; 
				margin-bottom:50px;
			}
		</style>
	</head>

	<body>
		<div >
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div><br>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

效果圖：

css上下間距的設置方法

【 、html視頻教程】

3、使用padding-top和padding-bottom屬性來設置上下間距

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red;
			}
			.abc p {
				padding-top:30px; 
				padding-bottom:30px;
			}
		</style>
	</head>

	<body>
		<div >
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div><br>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

效果圖：

css上下間距的設置方法

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css上下間距的設置方法”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯網站建設公司，，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

網頁名稱：css上下間距的設置方法-創新互聯
URL標題：http://m.newbst.com/article28/dsoijp.html

成都網站建設公司_創新互聯，為您提供微信小程序、電子商務、網站收錄、小程序開發、外貿網站建設、品牌網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都網站建設公司