关于inline/inline-block级别元素的margin属性以及padding属性的一些理解

总的来说，margin和padding属性作为新手入门时常用的属性，很多人都不陌生，相信理解起来都很简单，margin代表外边距，padding代表内边距，至少当时我们老师是这样讲的。

虽然使用起来很简单，但是真正将其实用的又能有多少人，以padding为例，作为一个内边距，就我而言，我会在使用  背景  以及  box-sizing  的时候使用的多，padding-box所占据的无非就是一点，它属于盒子内部的一部分，以此来理解，背景作为元素的一部分，是不是就这样可以轻易的用上来了呢?  而对于margin的话，一般会用于布局中，当然我见到的最多的就是在使用  两栏布局  的时候，前者使用float，后者使用margin，效果也是不错的。

今天，先讲讲  margin属性的负值  在inline-block元素下的表现。如下：

目标: 规定  每行显示3个元素，且元素之间的间距为20px;

主要测试元素代码: 

            <div class="ex-div">
                  <ul class="ex-ul">
                        <li class="ex-li"></li>
                        <li class="ex-li"></li>
                        <li class="ex-li"></li>
                        <li class="ex-li"></li>
                        <li class="ex-li"></li>
                        <li class="ex-li"></li>
                 </ul>
            </div>

属性如下:

.ex-div{
    display: inline-block;  //  保证后续测试部分能同行显示，以此观察是否ul多出来的20px影响布局;
    width: 340px;
    height: 300px;
    background-color: #Bff;  //  用于与ul标签所占据的空间颜色作对比
}

.ex-ul{  //  默认block，填充父节点
    height: 100%;
    margin-right: -20px; //  补充子标签因margin-right而多出来的20px(每个标签都有20px的外边距，因此最右边的不会贴近父容器)
    list-style: none;
}

.ex-li{
    float: left;
    background-color: #000;
    margin-right: 20px;
    width: 100px;
    height: 100px;
}

实验结果：

效果达成，子元素完全填充了父容器，而ul标签的情况如下:

多出来了20px，那么到底有没有影响呢，测一测:

将后续测试的也设置成同行显示的元素就好，不管是inline或者inline-block都行，由此得出结论:

在父容器定宽的情况下，子标签设置了margin左右负值是不会影响父容器的大小的！

细心的小伙伴注意咯~，两个标签直接会产生一个空白文本节点，因此之间产生一段距离，这是由于书写时换行所引起的，将后续标签设置font-size为0，给子标签再设置font-size就好了。

后续还会继续跟进~~~~，感谢！

（补充于2018年11月11日12:47:10

子元素margin左右负值并不会影响父容器的宽度，上述例子中有展示，至于原因仍在思考中。

按道理说，ul标签是处于充分可利用空间的情况下的，即填充父容器，那么使用margin左右的时候，增加的就是内部尺寸，因此ul的width才会增加，但是奇怪的是ul的内部尺寸增加，为什么不会影响父容器div的宽度？

）