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。

  • 相关阅读:
    HTML5保留的常用元素(三)
    HTML5保留的常用元素(二)
    HTML5保留的常用元素(一)
    vue项目打包部署到nginx 服务器上
    linux 前端部署
    window.open打开新窗口被浏览器拦截的处理方法
    windows java 环境变量配置
    npm 报错: npm ERR! Please try running this command again as root/Administrator.
    angular 之路由
    git 的日常使用命令
  • 原文地址:https://www.cnblogs.com/pcd12321/p/4490837.html
Copyright © 2011-2022 走看看