手记

使用 Padding 应该注意的地方

Padding 会改变元素的布局尺寸

如果是块级元素,padding 会改变元素水平和垂直方向的布局尺寸

例子:

<style>
    div {
        background: #ccc;
        width: 50px;
        height: 50px;
        padding: 5px;
    }
</style>

<div></div>

例子中,我们可以看到,div 元素的宽高均为 50px,但其实际占据的空间却是 60px,原因就是 padding 影响了元素水平和垂直方向的布局。

如果是内联元素,padding 只会改变元素水平方向的布局尺寸

例子:

<style>
    strong {
        background: #eee;
        opacity: .8;
        padding: 10px;
    }
</style>

<p>慕课,即大规模开放在线课程。
    <br>是新近涌现出来的一种<strong>在线课程</strong>开发模式。
</p>

例子中,我们可以看到,padding 对 strong 元素垂直方向的布局没有任何影响,只影响了其水平方向的布局。
但我们也可以明显地看到,padding 在垂直方向上,对 strong 元素本身是有效的,这就导致了其背景色与其他元素出现重叠现象。这种重叠效果,和我们使用 box-shadow、 outline 等样式效果一样,即纯视觉重叠,不影响布局。

例子:

<style>
    div {
        width: 200px;
        height: 50px;
        outline: dashed;
        box-shadow: 5px 5px 2px #999;
    }
</style>

<div></div>

优化方式

针对 padding 对元素布局的影响,可以采用以下两种方式进行优化:

1.使用 box-sizing: border-box;,切换内部盒子为 IE 盒子。

例子:

<style>
    div {
        box-sizing: border-box;
        width: 200px;
        height: 50px;
        padding: 5px;
        border: 5px solid red;
    }
</style>

<div></div>

2.在元素外面嵌套一层标签,并设置宽度,而该元素宽度使用默认值。

例子:

<style>
    div.p_style {
        width: 200px;
    }
    
    p.c_style {
        padding: 5px;
        border: 5px solid red;
    }
</style>

<div class="p_style">
    <p class="c_style">慕课,即大规模开放在线课程。</p>
</div>

Padding 百分比值基于其包含块宽度

首先,padding 不支持负数值,但 padding 支持百分比值。其次,padding 四个方向上的百分比值都是相对于其包含块宽度进行计算的。

例子:

<style>
    div {
        background: #eee;
        width: 200px;
    }
    
    p {
        padding: 10%;
    }
</style>

<div>
    <p>hello</p>
</div>

对于内联元素,如果文字内容较多,可能会出现换行的情况,此时,padding 也会换行。但无论如何变化,内联元素的 padding 值同样相对于其包含块的宽度计算。

例子:

<style>
    div {
        border: 1px solid darkblue;
        width: 200px;
    }
    
    span {
        padding-left: 50%;
        padding-right: 50%;
        background: rgba(255, 0, 0, 0.3);
    }
</style>

<div>
    <span>CSS 的很多现象很难解释</span>
</div>

我们知道,内联元素的 padding 在垂直方向上虽然不会影响布局,但是会造成视觉上的重叠,上例中,如果在 span 元素中,加入垂直方向上的 padding 值,就会出现下面例子中的怪异现象:

例子:

<style>
    div {
        border: 1px solid darkblue;
        width: 200px;
    }
    
    span {
        padding: 50%;
        background: #e91e63;
    }
</style>

<div>
    <span>CSS 的很多现象很难解释</span>
</div>

例子中,我们可以看到,很多文字内容看不到了,我们修改一下背景色的透明度,看看到底是什么遮住了文字:

例子:

<style>
    div {
        border: 1px solid darkblue;
        width: 200px;
    }
    
    span {
        padding: 50%;
        background: rgba(233, 30, 99, 0.4);
    }
</style>

<div>
    <span>CSS 的很多现象很难解释</span>
</div>

例子中,我们可以看到,是第二行的 padding 遮住了第一行的部分文字,之所以产生这种现象,是因为文字出现换行,导致 padding 也换行:在水平方向上,padding-left 位于第一个行盒子(1)的起始位置,padding-right 位于第二个行盒子的结束位置;而在垂直方向上,padding-top 与 padding-bottom 都有其 50% 包含块的宽度。这就导致第二个行盒子覆盖了第一个行盒子。

*(1)处于一行显示的一个或多个内联盒子称为行盒子。具体参考 深入理解盒子模型


如有错误,欢迎指正,本人不胜感激。

0人推荐
随时随地看视频
慕课网APP