padding笔记

源自慕课网张鑫旭老师视频课程笔记http://www.imooc.com/learn/710

应用

1、inline元素padding断行

    <div style="width: 400px;height: 400px;background: red;">
        <span style="padding: 39%;background: green;">内有文字若干</span>
    </div>

2、空inline元素+padding高宽也不等

见上图
inline元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的strut出现。

3、元素内置padding

ol li :40px
input textarea
button：最难控制

        label{
            display:inline-block;
            line-height:20px;
            padding:10px;
        }
        <button id="btn"></button>
        <label for="btn">按钮</label>

select下拉
radio、checkbox无内置

4、特殊样式实现

a)三道杠

    width: 150px;
    height: 30px;
    padding: 15px 0;
    border-top: 30px solid;
    border-bottom: 30px solid;
    background: currentColor;
    background-clip: content-box;

b)同心圆

    width: 150px;
    height: 150px;
    padding: 10px;
    border: 10px solid;
    border-radius: 50%;
    background: currentColor;
    background-clip: content-box;

c)左右高度自适应

    .box {
        overflow: hidden;
        resize: horizontal;
    }
    .left,.right{
        float: left;
        margin-bottom: -600px;
        padding-bottom: 600px;
    }

    <div class="box">
        <div class="left">
            红色
            <br>
            红色
            <br>
            红色
            <br>
            红色
            <br>
        </div>
        <div class="right">
            绿色
        </div>
    </div>