我们上一节已经介绍了简单的margin用法，下面我们来看看margin遇到的复杂问题。
我们来说第一点：
对于inline元素而言，上下边距margin无效，这是什么意思呢？我们来看看刚刚我们举的例子。
有一个div，然后里面放一个行内元素课后帮，然后给课后帮一个margin-left：20px；左边距20,这个时候是生效了。
但我们没有测试margin-top或者margin-bottom，其实试了也是完全无效的。
为什么呢？
既然是行内元素，那就要守行内的规矩。向我们之前遇到的例子，在课后帮后面跟了一个HWHelper这几个字。
我们希望调节HWHelper上下的相对关系，那我们就考虑这么一个问题，margin、margin-top、margin-bottom可不可以？
其实是不可以的。
行内元素如果想调整垂直位置的话，是需要通过vertical-align来操作的。比如说我们之前用过的vertical-align：top;
但是这里我们可能会想，vertical-align好像只能做这种粗枝大叶的调整。
比如说可以设定vertical-align:baseline或者vertical-align：top，基于基线或者顶部对齐的方式。
这样的话其实就有点太粗枝大叶了，比如说我想放一个特别的一个位置，这个时候怎么办呢？也是有办法的。
我们也可以设置具体的值，比如说10px,甚至可以设定负的像素。这是什么意思呢？就以10px为例，
设定正数的话，就会以现在的位置为基准在向上挪10个像素。如果为负数，取反。
所以我们说对于Inline元素而言，上下边距是无效的。也就是inline的话，我们否定了他的上下边距。
那么潜台词就是对于block而言就是上下边距生效。
对于这个我们就不做多说了，这个很正常，既然margin有上下边距，如果inline不生效了，
block在不生效，那就没有存在的意义了，所以block是肯定生效的。
但是除了inline和block之外，我们还提到一中元素叫做inline-block。
我们当时介绍inline-block的时候，提到它是集合了inline元素和block元素的特点。
比如尺寸上，默认是根据内容的宽高，但与此同时也可以向block元素一样去设定宽高。
从摆放上它是和inline元素一样的。是可以摆在行内的。
在margin这个问题上，它又类似于block，它可以设定上下边距。
所以对于inline-block而言，它的上下边距是生效的。但是它会在一定范围之内影响整行的一个行高，
这个事我们这里就不多说了，大家可以试试看，看看效果。
所以总结下来就是：
对于inline元素而言，上下边距无效。
对于block元素而言，上下边距生效。
那既然inline的margin上下边距无效了，那左右边距是怎样的呢？
左右边距就是正常的了。
第一点：我们给HWHelper设置左边距 margin-left:20p的话，它就会向右移动。
这样就改变了与课后帮这几个字的相对位置。
我们刚刚提到边距margin不但可以设置正数值。
第二点：margin也可以设置负数值。就像我们刚才举的例子。
我们有课后帮这么一个行内元素，最开始设定的是margin-left：20px;所以就会向右挪了20像素。
但是margin也可以取负值，比如说我们写margin-left:-20px；取负值就会与正值相反，内容就会向左边挪动20像素。
当我们给元素设置负值之后，就可以超出内容区域之外，其实这点对我们的布局是非常有帮助的，
这个在后面我们进行稍微复杂布局的时候，一定可以用到。
我们在来看看第三点：
第三点叫做左右边距margin可以设定为auto,auto就是自动的意思。我们仍然来举个例子。
假设我们黑框就是一个浏览器，然后我们放了一个div，但此时的div是我们设定的一个宽度。
如果此时我们给他设定一个margin-left:auto;他会怎么样呢？
它就会靠右，那如果我们设定margin-right:auto会怎样呢？
原理和margin-left是一样的，你设置左边距自动，它就会靠右。那么你设置margin-right右边距自动，他就会靠左。
由于自身就在左边的，所以并不会有什么影响。位置不变。
如果我们同时把margin-left和margin-right都设置为auto会怎样呢？
就会居中，这个就非常有帮助了，因为在我们的设计中，居中是非常常用的手法。有了这个，以后居中就很简单。
我们继续往下说。
现在我们要说的是，上下边距重叠，左右不重叠，这个是什么意思呢？我们来解释一下！
假设我们现在有两个元素，上下是紧挨着的状态。
那么此时我们给这两个元素都设置一下样式，都有margin-top：10px和margin-bottom：10px；会怎样呢？
实际上margin的意义就是要求保持距离，我们把两个元素的意义翻译过来就是：
元素1要求： “上下10px之内，不能有东西”
元素2要求：“上下1opx之内，不能有东西”
如果这样的话，我们样式会变成什么样呢？
首先元素1和元素2都从上至下挪10像素，这样上边就有了10像素的距离，此时我们重点来说说元素1和元素2之间的距离。
他们之间并没有出现我们想象的20像素距离，而是只有10像素的距离。
但我们发现这样其实就恰恰满足了要求。就是上下10像素之内不能有东西，看起来就非常合情合理了。
我们现在看看如果是左右会怎样？
现在我们有两个元素，元素1和元素2，此时是挨在一块的。
如果我们都给这两个元素设置样式，margin-left:10px和margin-right:10px；会发生什么情况呢？
会变成这个样子，首先整体元素会像右侧挪，这样左边就有了10元素的距离，但是我们发现在元素1和元素2之间却空了20像素的。
这种情况根据上下margin相比，就有些不太讲理了。
奇怪的地方不止这一点，我们继续往下看。
我们来看看紧靠浏览器上边缘作为容器的元素，其子元素的margin-top的奇异效果，这个说起来就真的有点诡异了。
我们举个例子：
假设这个页面就是一个浏览器，然后我们在其中放了两个元素，有一个div，在div中我们放了一个课后帮。
这个课后帮实际上是块元素，因为宽度占满整行了。我们不放行内元素是因为行内元素的margin-top不起效。
所以这里就把课后帮假定为块元素。
如果此时我们给课后帮设置margin-top：20px会怎样呢？
你猜可能会是这个样子，但实际上不是，那会是什么样呢？如果我们给课后帮设置margin-top：20px，他会把div也顶下来。
变成了这个样子，在虚线位置实际上是课后帮之前的位置，由于是白色的，可能看不太清效果，所以我以虚线标识一下。
其实就是把课后帮和div一块向下顶下来了，这个刚开始会觉得非常不讲理。
那如果我们确实有这么一个需求，希望课后帮在不顶div容器的同时往下挪。
其实我们可以换种思维考虑，我们从div去想。我们可以理解为div的顶端20像素不想有内容。而不是课后帮要往下挪20像素。
也就是说，类似这种需求的话，我们就不该用margin,那我们该用什么呢？ 我们用下一节来分析它！