margin

margin：[ <length> | <percentage> | auto ]{1,4}  为元素设置所有四个方向（上右下左）的外边距

  • auto：水平（默认）书写模式下，vertical-margin计算值为0，horizontal-margin取决于包含块的剩余可用空间
  • <length>：用长度值来定义外补白。可以为负值
  • <percentage>：用百分比来定义外补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，可以为负值 

   margin属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，

第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边

<!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: 10px 20px 40px 80px;

                background: #eee;

            }

        </style>

    </head>

    <body>

        <div class="test">注意我距上、右、下、左的距离</div>

    </body>

</html>

   padding

padding：[ <length> | <percentage> ]{1,4}  为元素设置所有四个方向（上右下左）的内边距

  • <length>：用长度值来定义内补白。不允许负值
  • <percentage>：用百分比来定义内补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，不允许负值

  padding属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，

第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            .test {

                float: left;

                padding: 10px;

                border: 1px solid #000;

            }

        </style>

    </head>

    <body>

        <div class="test">注意我离4条边框线的距离</div>

    </body>

</html>

CSS尺寸与补白属性-----margin和padding的更多相关文章

  1. 为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器？

    为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器? ul标签在FF中默认是有padding值的,而在IE中仅仅有margin默认有值.请看下面不同浏览中对paddi ...

  2. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  3. CSS属性margin、padding的区别

    原始状态 不设置margin和padding的状态 margin 设置外边距之后的状态 padding 设置内边距之后的状态 ,注意是撑开,外框高宽由300px变成450px. 说明:本文为原创作品, ...

  4. 简单属性margin和padding

    关于margin属性的介绍 margin:20px 上 右 下 左 都是20px margin:20px 40 px 上 下 20px 左 右 40px margin:20px 40px  60px ...

  5. CSS——行内元素的margin与padding

    行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效 例如span: <!DOCTYPE html> &l ...

  6. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  7. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  8. Css盒模型属性详解（margin和padding）

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  9. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

随机推荐

  1. 20165213&20165225结对学习感想及创意照

    20165213&20165225结对学习感想及创意照 会JAVA的大学生活好小组 团队感悟: 1+1>2还是1+1<2? 上述两个观点实际没有对错之分,取决点在于个人见解. 相信 ...

  2. threadPoolExecutor的基本解析

    线程池的构造方法中常见参数简介 corepoolsize:核心线程数,即便这里的线程处于空闲状态,也不会被回收,会一直存在线程池中 maxmumpoolsize:线程池所能容纳的最大线程数,超过这个数 ...

  3. idea的基本使用

    对于Idea没有workspace的概念,但是它把每个项目都看成是maven的一个模块,在一个idea窗口要想显示多个项目时就和eclipse不太一样,下面会详细介绍. 另外maven的setting ...

  4. html5页面自适应移动端

    1. <!-- 这段代码的意思是,让 viewport 的宽度等于物理设备上的真实分辨率,不允许用户缩放,这样 dpi 肯定和设备上的真实分辨率是一样的,不做任何缩放,网页会因此显得更细腻. 1 ...

  5. Java体系基本概念

    JVM:Java虚拟机 JRE:(Java Runtime Environment)Java程序允许,测试,传输应用程序的环境和平台 包括 jvm ,java 核心类库和支持的文件,但不包含开发工具J ...

  6. python-面向对象-14_eval函数

    eval 函数 eval() 函数十分强大 —— 将字符串 当成 有效的表达式 来求值 并 返回计算结果 # 基本的数学计算 In [1]: eval("1 + 1") Out[1 ...

  7. finecms如何调用多个指定栏目的内容

    想调用finecms多个栏目的内容,用英文状态下的逗号来分开多个id实现不了(catid=1,2,3),要如何写噢?后面ytkah想想这个跟sql语法有点一样,用IN_catid = 1,2,3果然成 ...

  8. Finecms模板标签调用小结 方便快速入门

    最近接了一个单子客户要求用finecms进行建站,由于也是php代码,也可以直接调用相关函数,所以上手相对比较快,ytkah总结了一些常用的函数方便您快速入门Finecms.一个网站一般由主页.栏目页 ...

  9. hibernate 主键生成方式

    1)assigned主键由外部程序负责生成,无需Hibernate参与. 2)hilo通过hi/lo 算法实现的主键生成机制,需要额外的数据库表保存主键生成历史状态. 3)seqhilo与hilo 类 ...

  10. 火币网API文档——Websocket 请求与订阅示例

    1. 访问地址 Pro 站行情请求地址为:wss://api.huobipro.com/ws HADAX 站行情请求地址为:wss://api.hadax.com/ws 2. 数据压缩 WebSock ...