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. java之旅_高级教程_java泛型

    摘自:http://www.runoob.com/java/java-generics.html JAVA泛型 java泛型(generics)是JDK5中引入的新特性,泛型提供了编译时类型安全检测机 ...

  2. mysql分库 分表

    原文链接:http://www.jianshu.com/p/89311703b320 传统的分库分表传统的分库分表都是通过应用层逻辑实现的,对于数据库层面来说,都是普通的表和库.分库分库的原因 首先, ...

  3. Mybatis中dao接口和mapper 的加载过程

    这里考虑的是mybatis和spring整合的场景 1.在系统启动的时候,会去执行配置文件中有关扫描mybatis接口的配置:通过MapperScannerConfigurer扫描接口生成spring ...

  4. codechef Sum of Cubes 图论

    正解:图论+数学 解题报告: 先放个传送门QwQ 然后放下题目大意?就说给定简单图,无自环或重边,然后求(∑e[i][j])k,i,j∈S,S为点集的子集 然后因为k的取值只有[1,3],所以这里分类 ...

  5. Ubuntu14.04 LTS 安装Chrome浏览器（转）

    add zhj: 亲测过,可以,原来不用FQ就可以下载,有点意外 原文:http://www.jianshu.com/p/8220578d0b15 1.打开终端(ctrl + alt + t),下载6 ...

  6. Ansible 快速上手（转）

    add by zhj: 执行Ansible(发音时,重音在最前面)命令有两种方式,一种是ad-hoc形式,另一种是playbooks,对于软件开发者来说,一般使用ad-hoc就足够了.playbook ...

  7. 强制禁用gitlab的双因子认证：Two-Factor Authentication

    (一)问题描述: 此博客解决如下问题:禁用gitlab的双因子认证 禁用前,如图(此时,你在gitlab中什么也干不了) (二)思路分析: 百度了很多方法,都不可靠(如不可靠的说明:https://s ...

  8. 接口测试工具-Jmeter使用笔记（四：响应断言）

    Jmeter中断言的类型有许多,我不在这里一一列举,只说下我用到的---响应断言. 作用:一个HTTP请求发出去,怎么判断执行的任务是否成功呢?通过检查服务器响应数据,是否返回预期想要的数据,如果是, ...

  9. JSONObject，String，Map互相转换

    JSONObject和String相互转换 JSONObject jsonObject = new JSONObject(); JSONArray jsonArray = new JSONArray( ...

  10. 各版本系统安装tesseract-ocr

    Mac版本 1.tesseract-ocr安装  brew install tesseract-ocr 注意:如果未安装brew命令,可以输入命令: brew官网:http://brew.sh /us ...