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. HashMap如何做循环遍历

    1.TestCase:

  2. 【Loadrunner】Loadrunner 手动关联技术

    Loadrunner 手动关联技术 录制成功,回放失败,怀疑和动态数据有关: 1 重新录制一份脚本,两次录制的脚本进行比对,确定动态数据,复制动态数据: 2  找到第一次产生该动态数据的响应对应的相应 ...

  3. 【Python】【面试必看】Python笔试题

    前言 现在面试测试岗位,一般会要求熟悉一门语言(python/java),为了考验求职者的基本功,一般会出 2 个笔试题,这些题目一般不难,主要考察基本功.要是给你一台电脑,在编辑器里面边写边调试,没 ...

  4. The each() function is deprecated报错的解决方法

    下午ytkah安装程序时出现了如下提示,意思是each函数过时了,可能跟php版本有关,因为今天早上刚把LAMP组件升级了,php升到7.2了,切换成php 7.1版本,提示消失了,可见PHP 7.2 ...

  5. kafka4 副本机制

    概述 每个分区有n个副本,可以承受n-1个节点故障. 每个副本都有自己的leader,其余都是follower. zk中存放分区的leader和 follower replica的信息.(get /b ...

  6. FastReport快速入门

    界面及连接关系 frxDBDataset1连接datasource 双击frxReport1控件进入设计界面,选择报表->数据,弹出窗口选择要显示数据的frxdbdataset,frxdbdat ...

  7. 前端框架之Vue(1)-第一个Vue实例

    vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...

  8. Nginx中的rewrite指令(break,last,redirect,permanent)

    rewite 在server块下,会优先执行rewrite部分,然后才会去匹配location块 server中的rewrite break和last没什么区别,都会去匹配location,所以没必要 ...

  9. 常量，变量，a++，++a，+=等

    常量:数据在程序里面进行运算时不能发生改变的数据,成为常量.变量:可变动的数据.变量的定义:  数据类型   变量名   =  初始值.基本数据类型:整数型:byte              1字节 ...

  10. Tensorflow实现LeNet-5、Saver保存与读取

    一. LeNet-5 LeNet-5是一种用于手写体字符识别的非常高效的卷积神经网络. 卷积神经网络能够很好的利用图像的结构信息. 卷积层的参数较少,这也是由卷积层的主要特性即局部连接和共享权重所决定 ...