第五十八章 外补

与内补相对,不过是在边框外面的。就好像在快递箱外面再包裹上泡泡纸。诶,这个就可以使原本紧挨着的元素之间产生间距了。外补属性写作 margin,其他和内补挺像的。

说到这里,这一章好像可以结束了……额,偷懒成功!毕竟效果什么的,你们自己试试就好了,而且我们后面练习也会使用它。但是它有一个特点,我们需要了解一下。

如果两个盒子,外补都是 10 像素。两个盒子放一起,那么盒子之间的距离是多少?

10+10=20,这好像是一道很简单的数学题。但是,如果这两个元素是并排摆放,确实是这样没错。而如果垂直摆放,那么这两者的内补会重叠起来(只是说相邻的边),那就是谁的大用谁的。现在一样大,那就是 10 像素。

<div class="box-margin"></div><div class="box-margin"></div>
.box-margin {height: 10px;margin: 10px;border: 3px solid orange;}

这就很容易看出,间距和元素的高度相同。也就是上面盒子底部的外补,和下面盒子顶部的外补叠在了一起。

如果只是这样还好吧,但是……如果这个元素在父元素中是第一个或者最后一个元素的话,它和父元素的外补也能叠加,就……

<div class="box-just-border"></div><div class="box-parent"><div class="box-margin"></div></div><div class="box-just-border"></div>
.box-margin {height: 30px;margin: 10px;background: orange;}.box-just-border {height: 30px;background: #CCCCFF;}.box-parent {background: #CCFFCC;}

我们看到父元素并没被子元素上下方向的外补撑开。而是在父元素外面形成了外补。左右则正常,符合我们的预期。

这就很难受。不过解决的方法也比较简单,给父元素设置上一个内补或者一个边框就行了。哪怕只有一像素,哪怕是透明的,都能解决问题。

但是……这很烦人诶,所以最简单的:垂直方向上,能用内补就不用外补。比如上面的例子,我们给父元素设置内补,就要比给子元素设置外补来的简单。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第五十八章 外补

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏