css怎麼設定左邊距-css教學-PHP中文網

css怎麼設定左邊距

青灯夜游

發布： 2023-01-06 11:12:37

原創

23543 人瀏覽過

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怎麼設定左邊距