margin-right属性详解，新手也能快速掌握的技巧！

今天我来搞一搞 CSS 里面这个 margin-right，说白就是设置元素右边的外边距，也就是元素和它右边东西之间的距离。

一开始我直接在一个 <p> 标签上试试：

<p style="margin-right: 20px;">这是一段话</p>

果然好使！这段话右边立刻空出一块。我又试试其他单位，像什么 em、cm，都能用，甚至还能用百分比！

然后我又想，这玩意儿能不能设置负值？一试，还真行！ 设置成负数的话，右边的元素还会往左边跑，和这个元素叠在一起。这可有意思，以后说不定能用这个特性搞点花活。

接下来我打算把这个 margin-right 用在一个 <div> 盒子上。我先弄两个盒子：

<div style="width: 100px; height: 100px; background-color: red;"></div>

<div style="width: 100px; height: 100px; background-color: blue;"></div>

这两个盒子默认是竖着排的，我想让它们横着排，并且中间空开一段距离。于是我给第一个盒子加个 margin-right: 50px;，成！俩盒子并排，而且中间空 50 个像素。

总结一下今天捣鼓 margin-right 的心得：

• 这玩意儿能给元素设置右边的空白，单位很多，px、em、cm、百分比都能用。
• 还能设置负值，让右边的元素往左跑，产生重叠效果。



• 给块级元素（比如 <div>）设置 margin-right，可以控制它和右边元素的水平距离。

今天就先折腾到这儿，以后遇到啥具体问题再具体分析。