引入padding后导致div布局混乱解决办法

增加padding的同时要注意总宽度够不够!
如果不够，可以缩小div的宽度
只需要把div的宽和高减去padding*2的值
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实战首页布局-margin设置</title>
    <style type="text/css">
        #container{
            width: 1002px;
            background: gray;
        }
        #header{
            height: 120px;
            background: orange;
        }

        /*若父亲div未设置高度，其子div为浮动型且设置了高度
         此时父div的高度不随子div的高度自变化 没有实际高度 是飘起来的
         可以给父div设置一个实际高度
         若想让其自变化 加上overflow:hidden*/
        #main{
            /*height: 600px;*/
            overflow: hidden;
            background: green;
        }
        #Lsite{
            width: 700px;
            height: 600px;
            float: left;
            background: pink;
        }

        /*类的css写法*/
        .four{
            /*width: 330px;*/
            width: 290px;
            /*height: 280px;*/
            height: 240px;
            background: white;
            float: left;
            margin:10px;
            padding: 20px
            /*增加padding的同时要注意总宽度够不够! 如果不够，可以缩小div的宽度 只需要把div的宽和高减去padding*2的值*/
        }

        #Rsite{
            width: 302px;
            height: 600px;
            float: right;
            background: purple;
        }
        #footer{
            height: 120px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="main">
            <div id="Lsite">
                <!-- 这4个div具有相同的布局（性质）
                    给它们取一个类名four，它们属于同一类
                    针对类写css就可以控制属于这一类的div -->
                <div class="four">
                    边框属性(border)用来设定一个元素的边线。
　　  边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
　　  间隙属性(padding)是用来设置元素内容到元素边界的距离。
                </div>
                <div class="four">
                    边框属性(border)用来设定一个元素的边线。
　　  边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
　　  间隙属性(padding)是用来设置元素内容到元素边界的距离。
                </div>
                <div class="four">
                    边框属性(border)用来设定一个元素的边线。
　　  边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
　　  间隙属性(padding)是用来设置元素内容到元素边界的距离。
                </div>
                <div class="four">
                    边框属性(border)用来设定一个元素的边线。
　　  边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
　　  间隙属性(padding)是用来设置元素内容到元素边界的距离。
                </div>
            </div>
            <div id="Rsite"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>
这里写图片描述
引入padding后导致div布局混乱解决办法

悦读
