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

关于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;
}

实验结果:

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

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

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

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

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

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

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

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

后续还会继续跟进~~~~,感谢!

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

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

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