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。

  • 相关阅读:
    webpack管理资源
    webpack缓存
    webpack起步
    openssl命令使用
    linux系统安装中文字体-----
    HTML转成PDF的4个前端方法----但都被我拒绝了,我选择后端方法(这才是吊!)
    HTML页面如何导出pdf
    为什么装了easyless插件,vscode还是不能用?
    JSON格式错误,json_decode中true和JSON_UNESCAPED_SLASHES的用法
    tp5条件判断,in,notin,between,if等
  • 原文地址:https://www.cnblogs.com/pcd12321/p/4490837.html
Copyright © 2011-2022 走看看