css中margin-right什麼意思-前端問答-PHP中文網

首頁

web前端

前端問答

css中margin-right什麼意思

青灯夜游

May 18, 2022 pm 01:55 PM

css css3

在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中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7838

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。