谈谈padding对块级元素宽度的影响

来源：互联网发布：淘宝ugg授权书怎么弄编辑：程序博客网时间：2024/05/17 21:42

在做圣杯布局的时候，发现了一个问题，当我把中间部分的父级页面 mainContainer 的宽度设置为 100% 或者固定宽度的时候，在设置padding的时候 mainContainer 的宽度就会碎padding的值而变化，如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        html,body{
            height: 100%;
            width:100%;
            margin:0;
            padding:0;
        }

        .mainContainer {
            height: 300px;
            width:100%;
            background-color: blue;
            padding-right: 100px;
            padding-left: 150px;
        }


        .left{
            float: left;
            width:150px;
            height: 200px;
            background-color: brown;
        }
        .right{
            float: right;
            width:100px;
            height: 200px;
            background-color:burlywood;
        }
    </style>
</head>
<body>
    <div class="mainContainer ">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>
</html>

效果如下：

发下右侧被挤掉了，而且宽度更宽了。

这是只需我们把 mainContainer 的宽度改为auto  或者 去掉width的设置，问题就解决了

.mainContainer {
    height: 300px;
    /*width:100%;*/
    background-color: blue;
    padding-right: 100px;
    padding-left: 150px;
}

或者

.mainContainer {
    height: 300px;
    width:auto;
    background-color: blue;
    padding-right: 100px;
    padding-left: 150px;
}

此时效果如下：

此时我们发现问题迎刃而解，有次我们总结如下：当 块级元素 不设置宽度大小的时候， 块级元素的宽度不会随着padding-left 和padding-right的值而变化。

0 0