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

增加padding的同时要注意总宽度够不够!
如果不够,可以缩小div的宽度
只需要把div的宽和高减去padding*2的值


<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">
                
                <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布局混乱解决办法_第1张图片

你可能感兴趣的:(HTML/CSS)