zoukankan      html  css  js  c++  java
  • 关于padding与margin的区别

    代码一:全为padding。

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin||padding</title>
        <style type="text/css">
    #div1{
        800px;
        background-color: red;
        padding: 20px;/*840px*/
    }
    #div2{
        background-color: green;
        padding: 20px;/*800px*/
    }
    #div3{
        background-color: blue;
        padding: 20px;/*760px*/
    }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
                </div>
            </div>
        </div>
    </body>
    </html>

    div1,div2,div3的宽度分别为840px,800px,760px。

    代码二:全为margin。

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin||padding</title>
        <style type="text/css">
    #div1{
        800px;
        background-color: red;/*800px*/
    }
    #div2{
        background-color: green;
        margin: 20px;/*760px*/
    }
    #div3{
        background-color: blue;
        margin: 20px;/*720px*/
    }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
                </div>
            </div>
        </div>
    </body>
    </html>

    div1,div2,div3的宽度分别为800px,760px,720px。

    代码三:包含padding和margin。

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin||padding</title>
        <style type="text/css">
    #div1{
        800px;
        background-color: red;
        padding: 20px;/*840px*/
    }
    #div2{
        background-color: green;
        padding: 20px;
        margin: 20px;/*760px*/
    }
    #div3{
        background-color: blue;
        padding: 20px;
        margin: 20px;/*680px*/
    }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
                </div>
            </div>
        </div>
    </body>
    </html>

    div1,div2,div3的宽度分别为840px,760px,680px。

  • 相关阅读:
    Android RecyclerView如何去掉上拉刷新和下拉加载的阴影
    python如何在列表、对象、集合中根据条件筛选数据
    解决Glide在一个imageview上更换图片时会闪的问题
    响应时间三个非常重要的时间点
    android 向系统日历添加日程事件
    android 系统日历 插入重复事件规则 RRULE
    android Calendar Provider
    android edittext设置获取焦点
    android 自定义光标颜色
    android动态改变TextView字体大小遇到的问题
  • 原文地址:https://www.cnblogs.com/pcd12321/p/4490837.html
Copyright © 2011-2022 走看看