首頁 > web前端 > 前端問答 > css中margin-right什麼意思

css中margin-right什麼意思

青灯夜游
發布: 2022-05-18 13:56:03
原創
9120 人瀏覽過

在css中,margin-right的意思為“右外邊距”,是用於設定元素的右邊位置距離的一個外邊距屬性,其值允許設為負數,語法為“margin-right :邊距值;”;邊距值可以設定為關鍵字“auto”,也可是百分比的相對值,或固定邊距值。

css中margin-right什麼意思

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

在css中,margin-right的意思為“右外邊距”,是用來設定元素的右邊位置距離的一個外邊距屬性。

margin-right屬性設定元素的右邊距,屬性值可以是負數。如果我們需要同時設定元素的上下左右的外邊距,我們可以使用margin屬性來設定。

margin-right屬性語法格式:

margin-right:auto|length|%
登入後複製
##auto 瀏覽器設定的右外邊距。 定義固定的右外邊距。預設值是 0。 定義基於父物件總寬度的百分比右外邊距。
#值描述
length
%

範例1:百分比的相對值

#設定一個p 元素的右邊距為容器寬度的50%

<html>
	<head>
		<meta charset="utf-8">
		<style>
			p.ex1 {
				margin-right: 50%
			}
		</style>
	</head>

	<body>

		<p>一个没有指定边距大小的段落。一个没有指定边距大小的段落。一个没有指定边距大小的段落。</p>
		<p class="ex1">一个右边距为容器宽度的 50%的段落。一个右边距为容器宽度的 50%的段落。一个右边距为容器宽度的 50%的段落。一个右边距为容器宽度的 50%的段落。一个右边距为容器宽度的 50%的段落。</p>

	</body>
</html>
登入後複製

css中margin-right什麼意思

範例2:設定固定值

設定一個p 元素的右距為50px

<html>
	<head>
		<meta charset="utf-8">
		<style>
			p.ex1 {
				margin-right: 50px;
			}
		</style>
	</head>

	<body>

		<p>一个没有指定边距大小的段落。一个没有指定边距大小的段落。一个没有指定边距大小的段落。</p>
		<p class="ex1">一个右边距为 50px 的段落。一个右边距为 50px 的段落。一个右边距为 50px 的段落。一个右边距为 50px 的段落。一个右边距为 50px 的段落。</p>

	</body>
</html>
登入後複製

css中margin-right什麼意思

擴充知識:margin負值

負邊距即margin屬性的值設為負值,在CSS佈局中時一個很有用的技巧。值為正的場景很常見,大家都很熟悉其表現

  • 當margin-top、margin-left為負值的時候,會把元素上移、左移,同時文檔流中的位置也發生相應變化,這點與position:relative的元素設定top、left後元素還佔據原來位置不同

  • 當margin-bottom、margin-right設負值的時候,元素本身沒有位置變化,後面的元素會下移、右移。

你遇到的情況這裡應該都會包含:

  • #區塊級元素設定margin-top margin-bottom 都會發生位移,只不過設定margin-bottom,會發生位移的是其後邊的​​元素;

  • #行內元素設定margin-top margin-bottom 都不會發生位移,添加絕對定位(讓其脫離文檔流,例如浮動固定定位),設定margin-top會發生位移; 改變vertical-align的設定(middle top),行內塊元素設定margin-top margin-bottom 可以發生位移;

  • 設定margin-left 區塊級元素和行內元素都會發生位移,不同的是區塊級元素後邊的內容不會發生位移,行內元素後的內容會發生位移(因為行內元素後的內容是跟它在同一行呀);

  • 區塊級元素設定margin-right,自身寬度增加;行內元素設定margin-right,元素後邊的行內元素會根據數值位移

#附註:影響margin顯示效果的因素:display 定位機制verticle-align

(學習影片分享:

css影片教學web前端

以上是css中margin-right什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板