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. rman checksyntax和解决RMAN-01009: syntax error: found "dot"

    在日常清归档时候执行脚本报错 RMAN-00552: syntax error in command line argumentsRMAN-01009: syntax error: found &qu ...

  2. ORACLE DIRECTORY目录管理步骤

    ORACLE DIRECTORY目录管理步骤 ORACLE的 DIRECTORY在数据库中是个目录的路径,需要在操作系统中有相应的目录与之对应:ORACLE目录的作用就是让ORACLE数据库和操作系统 ...

  3. mysql拼接sql的语法concat()用法

    之前写了oracle拼接sql是用“||”,那么mysql也有自己的拼接的语法concat() concat()的基本语法是如下: 括号内的拼接内容语法和python中拼接显示字符串和变量.常量时一样 ...

  4. selenium+xpath在不同层级的写法

    总结:定位虽然用Inndex定位最快,但是定位最好不要用浏览器自带定位xpath,尽量不要用Index,否则写的UI自动化脚本的定位元素,需要重新维护.代价太大. 一:不在同一层级,可以用[./..] ...

  5. Python 标准输出 sys.stdout 重定向（转）

    add by zhj: 其实很少使用sys.stdout,之前django的manage.py命令的源码中使用了sys.stdout和sys.stderr,所以专门查了一下 这两个命令与print的区 ...

  6. 【托业】【新托业TOEIC新题型真题】学习笔记2-题库一-->P5-6

    P5-6 --------------------------------------单词-------------------------------------- transfrom 转化 jus ...

  7. 微信小程序tabbar设置样式在哪里改

    微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...

  8. [django]梳理drf知识点

    要实现的功能 idc_list/ get 列出所有 post 创建一个idc idc_detail/1/ get 获取一个idc put 修改一个idc delete 删除一个idc 一般url是这样 ...

  9. ssh和scp时指定端口

    (1)ssh ssh -p xx $user@ip 其中xx是端口号,user是用户名,ip是主机ip 比如:ssh -p 23241 root@192.168.1.2 参考:https://blog ...

  10. 如何解决gerrit代码冲突

    日常开发中,我们存在多人开发和同一个人提交多次记录的情况,这就避免不了代码冲突的情况出现. 下面介绍几种gerrit提交失败的现象,后续会根据大家遇到的情况,持续更新. 注意:出现合入不了,显示“ca ...