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。

  • 相关阅读:
    软件测试原则
    java知识点
    jquery取值
    Javaweb命名规则
    @ResponseBody
    jquery ajax 方法及各参数详解
    @RequestMapping用法详解
    eclipse+android+opencv环境搭建的步骤
    Java中的内部类(回调)
    OpenCV直方图(直方图、直方图均衡,直方图匹配,原理、实现)
  • 原文地址:https://www.cnblogs.com/pcd12321/p/4490837.html
Copyright © 2011-2022 走看看