溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何在css中設(shè)置外邊距

發(fā)布時(shí)間：2021-05-13 16:15:21 來(lái)源：億速云 閱讀：1059 作者：Leah 欄目：web開(kāi)發(fā)

如何在css中設(shè)置外邊距？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

1、使用margin屬性

margin簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有1到4個(gè)值。

實(shí)例:

margin:10px 5px 15px 20px;

  • 上邊距是 10px

  • 右邊距是 5px

  • 下邊距是 15px

  • 左邊距是 20px

margin:10px 5px 15px;

  • 上邊距是 10px

  • 右邊距和左邊距是 5px

  • 下邊距是 15px

margin:10px 5px;

  • 上邊距和下邊距是 10px

  • 右邊距和左邊距是 5px

margin:10px;

  • 所有四個(gè)邊距都是 10px

2、使用margin-top、margin-bottom、margin-left和margin-right屬性

  • margin-top：設(shè)置元素的上外邊距

  • margin-bottom：設(shè)置元素的下外邊距

  • margin-left：設(shè)置元素的左外邊距

  • margin-right：設(shè)置元素的右外邊距

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			div{
				border: 1px solid red;
			}
			.a1{
				margin-top: 10px;
			}
			.a2{
				margin-bottom: 10px;
			}
			.a3{
				margin-left: 10px;
			}
			.a4{
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div>測(cè)試文本</div>
		<div class="a1">測(cè)試文本</div>
		<div class="a2">測(cè)試文本</div>
		<div class="a3">測(cè)試文本</div>
		<div class="a4">測(cè)試文本</div>
		<div>測(cè)試文本</div>
	</body>

</html>

效果圖：

如何在css中設(shè)置外邊距

css的三種引入方式

1.行內(nèi)樣式，最直接最簡(jiǎn)單的一種，直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

看完上述內(nèi)容，你們掌握如何在css中設(shè)置外邊距的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手