margin属性的正负值确定

      margin属性用来使用设置外边距，大多数情况使用正值，但是一些稍复杂的定位就会使用到负值，所以对margin属性的正负值理解是有必要的，本文同时解释了margin-right和margin-bottom没有效果的原因以及解决方法。

1、“margin-left”属性

margin-left属性设置元素的左边距。

记忆方式一：以“元素原来位置的左边”为零界线，向右移动为正值，向左移动为负值。

记忆方式二：以“其他元素（即元素想要拉开距离的外元素）的边缘”为零界线，元素的左边与零界线拉开距离为正；元素左边超出零界线为负。

例子如下：

2、“margin-right”属性

margin-right属性设置元素的右边距。

注意：直接使用margin-right属性一般不会有任何效果，这是因为浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下， 如果子容器的宽度能够被容纳 ，设置margin-right是没有用的。

解决：要使margin-right有用，就必须使用定位属性（position）或者浮动属性（float）为前提。

这里使用position为例，先将父元素设置相对定位position：relative，再将测试元素设置绝对定位position：absolute，right：0px。

记忆方式一：以“元素原来位置的右边”（这里指已经定位好，前提设置好的位置）为零界线，向左移动为正值，向右移动为负值。

记忆方式二：以“其他元素（即元素想要拉开距离的外元素）的边缘”为零界线，元素的右边与零界线拉开距离为正；元素右边超出零界线为负。

例子如下：

3、“margin-top”属性

margin-top属性设置元素的上边距。

记忆方式一：以“元素原来位置的上边”为零界线，向下移动为正值，向上移动为负值。

记忆方式二：以“其他元素（即元素想要拉开距离的外元素）的边缘”为零界线，元素的上边与零界线拉开距离为正；元素上边超出零界线为负。

例子如下：

4、“margin-bottom”属性

margin-bottom属性设置元素的下边距。

注意：直接使用margin-bottom属性一般不会有任何效果，这是因为浏览器默认从上往下渲染元素，在没有超出父容器的高度的前提下， 如果子容器的高度能够被容纳 ，设置margin-bottom是没有用的。

解决：要使margin-bottom有用，就必须使用定位属性（position）或者浮动属性（float）为前提。

这里使用position为例，先将父元素设置相对定位position：relative，再将测试元素设置绝对定位position：absolute，bottom：0px。

记忆方式一：以“元素原来位置的下边”（这里指已经定位好，前提设置好的位置）为零界线，向上移动为正值，向下移动为负值。

记忆方式二：以“其他元素（即元素想要拉开距离的外元素）的边缘”为零界线，元素的下边与零界线拉开距离为正；元素下边超出零界线为负。

例子如下：

总结：

以“元素原来位置的边”为零界线（margin-left以左边，margin-right以右边，margin-top以上边，margin-bottom以下边），向边的相反方向移动为正值，向边的同向方向移动为负值。举例：margin-left，以“元素原来位置的左边”为零界线，向右移动为正值，向左移动为负值。

 

 

 

 

 

转载于:https://www.cnblogs.com/liuyaying/p/7225451.html