关于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的宽度?
)