一、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/n/258392.html
微信扫一扫 
支付宝扫一扫 