一、margin-right的基本概念
1、margin-right是指元素的右側外邊距，也可以簡寫為margin-right。
2、margin-right可用於塊級元素和替換元素（例如圖像）
3、margin-right會影響元素的位置，邊框和背景顏色不包括在內。
二、margin-right的屬性值
1、length
.box {
margin-right: 20px;
}
2、percentage（百分比）
.box {
margin-right: 10%;
}
3、auto
如果將margin-right設置為auto，則margin-right將自動計算，並根據其他 margins （如果有）平分可用空間。
.box {
margin-right: auto;
}
三、margin-right的使用技巧
1、使用margin-right對齊元素
要將塊元素水平居中，請使用margin-right和margin-left屬性，並將其設置為auto。
.box {
margin-right: auto;
margin-left: auto;
}
2、使用margin-right留白
通過設置margin-right可以在元素外部創建留白。
.box {
margin-right: 20px;
}
3、使用負的margin-right
可以使用負的margin-right將元素相互重疊。
.box1 {
float: left;
width: 50%;
margin-right: -20px;
}
.box2 {
float: left;
width: 50%;
margin-right: -20px;
}
四、margin-right的注意事項
1、margin-right在RTL（從右到左）布局中表現不同，因為它在RTL布局下表示左側外邊距。
2、 margin-right不會影響元素的大小或寬度。
3、 如果上下左右的margin都設置了值，則元素的外邊距按照順序計算。
五、總結
margin-right是CSS中一個常用且實用的屬性之一，既可以用於調整元素之間的間距，也可以用來對齊元素和創建留白。使用margin-right屬性時，需要注意其屬性值的不同，以及在RTL布局中表現不同的問題。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/258392.html
微信掃一掃 
支付寶掃一掃 