首頁 >web前端 >css教學 >css怎麼設定左邊距

css怎麼設定左邊距

青灯夜游原創: 2021-05-12 16:10:5223615瀏覽

css設定左邊距的方法：1、使用margin-left屬性，可以設定元素的左外邊距，語法格式「margin-left:邊距值;」；2、使用padding-left屬性，可設定元素的左內邊距，語法格式「padding-left:邊距值;」。

css怎麼設定左邊距

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

1、使用margin-left設定左外邊距

margin-left屬性設定元素的左外邊距。

注意：負值是允許的。

屬性值：

值	#描述
auto	瀏覽器設定的左外邊距。
length	定義固定的左外邊距。預設值是0。
%	定義基於父物件總寬度的百分比左外邊距。

範例：

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			p.leftmargin {
				margin-left: 1cm;
			}
		</style>
	</head>

	<body>
		<p>这个段落没有指定左边距。</p>
		<p class="leftmargin">这个段落带有指定的左外边距。</p>
	</body>

</html>

css怎麼設定左邊距

#2、使用padding-left設定左內邊距

padding-left屬性設定一個元素的左內邊距。

注意：負值是不允許的。

屬性值：

規定以具體單位計的固定的左內邊距值，例如像素、公分等。預設值是 0px。定義基於父元素寬度的百分比左內邊距。此值不會如預期地那樣運作於所有的瀏覽器中。

值	#描述
##length
%

範例：

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			p.leftpadding {
				margin-left: 1cm;
			}
		</style>
	</head>

	<body>
		<p>这个段落没有指定左边距。</p>
		<p class="leftpadding">这个段落带有指定的左内边距。</p>
	</body>

</html>

css怎麼設定左邊距

#學習影片分享：

css影片教學

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

陳述：

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

上一篇：css實現三列佈局有哪些方法下一篇：css實現三列佈局有哪些方法

看更多