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。

  • 相关阅读:
    最值
    算数平均值/加权平均值
    jdbatemplate使用
    所有正规jar包
    java代码在计算机中经历的三个阶段,反射的原理
    lambda函数式编程思想
    重写equals方法
    安全牛-弱点扫描
    安全牛-主动收集
    安全牛-被动收集
  • 原文地址:https://www.cnblogs.com/pcd12321/p/4490837.html
Copyright © 2011-2022 走看看