CSS 中的 margin-right 属性是页面布局中非常重要的一部分。正确的使用 margin-right 属性可以帮助我们更加高效地实现所需的布局效果。接下来，我们将对 margin-right 属性的正确运用进行详细的介绍。

一、margin-right 的基本概念

margin-right 属性指的是一个元素右侧的外边距。它决定了这个元素与其相邻元素右侧的距离。如果我们希望让元素向右移动，我们就可以调整它的 margin-right 属性的值。

二、margin-right 的用法技巧

1. 调整页面中的间距

在进行页面布局的时候，我们往往需要考虑到元素之间的间距。如果我们想要让两个元素之间的间距变得更宽，我们就可以调整其中一个元素的 margin-right 属性的值。例如：

```

.div1 {

width:200px;

}

.div2 {

width:200px;

margin-right:50px;

}

```

上面这段代码中，.div1 和 .div2 都有 200px 的宽度，但是由于 .div2 的 margin-right 属性值为 50px，所以 .div2 与右侧的元素之间的距离就会变得更宽。

2. 响应式布局

在进行响应式布局的时候，我们往往需要考虑到不同屏幕尺寸下元素的排列顺序以及间距的变化。使用 margin-right 属性可以帮助我们更加灵活地实现这些布局效果。例如：

```

.div1 {

width:200px;

}

.div2 {

width:200px;

margin-right:50px;

}

@media only screen and (max-width: 600px) {

.div1 {

order:2;

}

.div2 {

order:1;

margin-right:0;

}

}

```

上面这段代码中，.div1 和 .div2 在大屏幕设备上按照从左到右的顺序排列，.div2 的右侧间距为 50px。在小屏幕设备上，我们需要将 .div1 放在 .div2 的左侧。

通过调整 .div2 的 margin-right 属性的值，我们可以实现在小屏幕设备上 .div1 和 .div2 之间没有间距的效果。

3. 布局中的浮动元素

在进行布局的时候，我们往往会使用浮动元素的布局方式。使用 margin-right 属性可以帮助我们更好地控制浮动元素之间的间距。例如：

```