你不知道的padding

标题党当上瘾了，讲完margin又来padding，继续继续。

其实padding要比margin简单得多，说是不知道的padding，不如说是padding应用的一些小技巧，不要小看这些小东西，虽然有很多代替的方案，但是就用一点点css就解决了问题，何乐而不为呢，网页上的东西能用css解决的就尽量不要用js了。

首先padding是没有负值的，想着负padding的同学可能要失望了，可以理解，内边距嘛，补白还能有负的？其实padding的功能很简单，就是填充。宽高不够，填充一下；背景不够，填充一下。

用Margin还是用Padding

这可以算做是党争了吧(tab党和空格党表示不服)，其实什么时候用很简单，只是浏览时若你想在外侧添加空白且空白处不需要背景，用margin，否则用padding。当需要js触发事件时你想点击（或者其它操作）元素外面空白没有事件发生，用margin，需要发生事件用padding。

其实区别很简单，margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。

譬如margin垂直外边距合并如果用padding的话则不会出现合并问题，在视觉上与margin一样，当然前提是你不设置背景，也不需要精确的在这个元素上（准确说是盒模型的content）触发一些js事件。

好了，该讲一些关于padding的应用了。

Padding背景图片自适应

其实这个大多数应用于移动端，当然pc也能用，在设置背景图片或者说一张自适应的图片，为了不让其变形，一般宽度或者高度只设置其一，让其自适应显示，图片是等比缩放的，不会发生形变。

我们布局时多数是设置其宽度让其自适应显示，但是这个东西有个缺点，图片加载不是瞬间完成的，尤其是网速较慢时，图片要等一段时间才会出来，而且图片可能会出现加载失败的情况，这回导致我们的布局变得混乱，原本放图片的位置会有其它元素顶上来。

说到这里，肯定是用padding解决啦，当然有人可能会好奇，padding怎么解决呀。
我们写padding的时候值可以是length（数字），也可以是%（百分比），重点就是这个百分比了，百分比是基于父元素的宽度的百分比的内边距。也就是说你父元素的宽度是100px；子元素的padding-top:100%;那么这个100%就是100px*100%。ok，如果知道图片的图片高度/图片宽度这个比例的话那么这个比例乘以图片宽度就能得到图片的自适应的高度了。

简单来说就是知道图片的图片高度/图片宽度*图片自适应的宽度，那么自适应的高度也就出来了，所以我们可以用padding-top把这个高度提前占位。

.main{
    width: 500px;
    margin:0 auto;
}
.box{
    position: relative;
    padding-top: 56.25%;    /*图片高度/图片宽度*100%*/
    overflow: hidden;
}
.box img{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
<div class="main">
    <div class="box">
        <img src=""/>
    </div>
</div>

上面的图片自适应宽为500px;我们计算出图片的高/宽比例，然后用padding-top:这个比例，实例为500px*高/宽，那么图片在500px宽下面的实际高度也就是这个数值，图片没加载出来的时候padding-top占据了这个高度，加载出来后正常显示。

当然，不只是用img可以这样显示，用背景图片也可以的：

.main{
    width: 500px;
    margin:0 auto;
}
 .figure {
        padding-top:56.25%; /*图片高度/图片宽度*100%*/
        background: url("https://ouzdb04w7.bkt.clouddn.com/image/2017/10/27/timg3.jpg") no-repeat;
        background-size:cover;
        background-position:center;
}
<div class="main">
    <div class="column">
            <div class="figure" ></div>
    </div>
</div>

想要一行自适应的正方形，再配合text-align:justify;多列均匀布局，可以达到这样的效果:

.mybox{
    width: 100%;
    height: 300px;
    text-align: justify;
    text-justify: inter-ideograph;
    padding: 10%;
    box-sizing: border-box;
}
.mybox:after{
        content: '';
        width: 100%;
        position: relative;
        display: inline-block;
}
.mybox .box{
    width: 12.5%;
    background: red;
    display: inline-block;
    position:relative;
}
.box:before{
        content: '';
        padding-top: 100%;
        box-sizing: border-box;
        display: block;
        width: 0;
    }
.pox{
    position:absolute;
    height:100%;
    width:100%;
    left: 0;
    top: 0;
    border: 1px solid red;
    box-sizing: border-box;
}
<div class="mybox">
    <div class="box"><div class="pox"></div></div>
    <div class="box"><div class="pox"></div></div>
    <div class="box"><div class="pox"></div></div>
    <div class="box"><div class="pox"></div></div>
    <div class="box"><div class="pox"></div></div>
</div>

在pc端改变窗口宽度试试。

本文示例：链接1 链接2

本文代码地址：链接