zoukankan      html  css  js  c++  java
  • CSS中margin和padding的区别

    pdding是内边距,是盒子的边与盒子内部元素的距离;margin是盒子的外边距,即盒子与盒子之间的距离

    padding说明:

    检索或设置对象四边的内部边距。
    • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
    • 如果只提供一个,将用于全部的四边。
    • 如果提供两个,第一个用于上、下,第二个用于左、右。
    • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
    • 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁;若要设置上、下两边的内补丁,必须先使该对象表现为块级或内联块级。
    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>padding_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test {
        float: left;
        padding: 10px;
        border: 1px solid #000;
    }
    </style>
    </head>
    <body>
    <div class="test">注意我离4条边框线的距离</div>
    </body>
    </html>

    页面展示效果(内容到边框的距离):

      

    margin说明:

    检索或设置对象四边的外延边距。
    • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
    • 如果只提供一个,将用于全部的四边。
    • 如果提供两个,第一个用于上、下,第二个用于左、右。
    • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
    • 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。
    • 外延边距始终透明。
    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>margin_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test{margin:20px;background:#eee;}
    </style>
    </head>
    <body>
    <div class="test">注意我距上、右、下、左的距离</div>
    </body>
    </html>

    页面展示效果(内边框到外边框的距离):

     css参考手册:

    http://www.css88.com/book/css/

  • 相关阅读:
    致应届毕业生——程序员的生存法则 转自CSDN 作者:陈丽辉
    TIOBE 8月份编程语言排行榜,F#强势插入
    C–gcc命令行下的参数
    转载sunboy_2050 Android APK反编译详解(附图)
    转载IT168 分析:Python在Linux平台上的发展前景
    PHP 简单学习过程1
    买火车票必须知道的事
    Delphi PointerMath编译指令
    给DropDownList的DataTextField属性绑定两个字段
    通过HttpModule、httpHandlers防止SQL注入式攻击
  • 原文地址:https://www.cnblogs.com/brownyangyang/p/9112428.html
Copyright © 2011-2022 走看看