首頁 > 文章 > web前端 > css怎麼設定外邊距

css怎麼設定外邊距

青灯夜游原創: 2021-05-13 15:43:5612235瀏覽

css設定外邊距的方法：1、使用margin屬性，在一個宣告中設定元素的所有外邊距；2、使用margin-top、margin-bottom、margin-left和margin-right屬性，分別設定元素的上、下、左、右四個外邊距。

css怎麼設定外邊距

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

1、使用margin屬性

margin簡寫屬性在一個宣告中設定所有外邊距屬性。該屬性可以有1到4個值。

實例:

margin:10px 5px 15px 20px;

上邊距是10px
右邊距是5px
##下邊距是15px
左邊距是20px

margin:10px 5px 15px;

上邊距是10px
右邊距和左邊距是5px
下邊距是15px

margin:10px 5px;

#上邊距和下邊距是10px
右邊距和左邊距是5px

margin:10px;

所有四個邊距都是10px

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

#margin-top：設定元素的上外邊距
#margin-bottom：設定元素的下外邊距
margin-left：設定元素的左外邊距
margin-right：設定元素的右外邊距

##範例：

<!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>测试文本</div>
		<div class="a1">测试文本</div>
		<div class="a2">测试文本</div>
		<div class="a3">测试文本</div>
		<div class="a4">测试文本</div>
		<div>测试文本</div>
	</body>

</html>

效果圖：

css怎麼設定外邊距

（學習影片分享：

css影片教學）

以上是css怎麼設定外邊距的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery怎麼添加css下一篇：jquery怎麼添加css

看更多