1. CSS 外边距
    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
  2.  
  3. 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
  4.  
  5. ################
  6.  
  7. CSS 外边距属性
    属性 描述
    margin 简写属性。在一个声明中设置所有外边距属性。
    margin-bottom  设置元素的下外边距。
    margin-left    设置元素的左外边距。
    margin-right   设置元素的右外边距。
    margin-top 设置元素的上外边距。
    ####################
  8.  
  9. 1.设置文本的左外边距
    本例演示如何设置文本的左外边距。
        <style type="text/css">
            p.leftmargin {margin-left:1cm}
        </style>
    </head>
    <body>
    <p>这个段落没有指定</p>
    <p class="leftmargin"> 这个段落带有指定的左外边距</p>
    </body>
  10.  
  11. 2.设置文本的右外边距
    本例演示如何设置文本的右外边距。
        <style type="text/css">
            p.rightmargin {margin-right: 8cm}
        </style>
    </head>
    <body>
    <p>这个段落没有指定</p>
    <p class="rightmargin"> 这个段落带有指定的右外边距。</p>
    </body>
  12.  
  13. 3.设置文本的上外边距
    本例演示如何设置文本的上外边距。
        <style type="text/css">
            p.topmargin {margin-top: 5cm}
        </style>
    </head>
    <body>
    <p>这个段落没有指定</p>
    <p class="topmargin"> 这个段落指定了上外边距。</p>
    </body>
  14.  
  15. 4.设置文本的下外边距
    本例演示如何设置文本的下外边距。
  16.  
  17.     <style type="text/css">
            p.bottommargin {margin-bottom:2cm}
  18.  
  19.     </style>
    </head>
    <body>
    <p>这个段落没有指定外边距</p>
    <p class="bottommargin">这个段落指定了外边距。</p>
    </body>
  20.  
  21. 5.所有的外边距属性在一个声明中。
    本例演示如何将所有的外边距属性设置于一个声明中。
        <style type="text/css">
        p.margin {margin: 2cm 4cm 3cm 4cm}
        </style>
    </head>
  22.  
  23. <body>
  24.  
  25. <p>这个段落没有指定外边距。</p>
  26.  
  27. <p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
  28.  
  29. <p>这个段落没有指定外边距。</p>
  30.  
  31. </body>

CSS 外边距的更多相关文章

  1. CSS外边距叠加问题

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...

  2. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  3. Css 外边距折叠(collapsed margin ) 浅析

    Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...

  4. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. css外边距合并和z-index的问题

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  7. CSS 外边距合并。

    <div id = "parent"> <div id = "child"> demo </div> </div> ...

  8. CSS外边距属性，深入理解margin

    margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例 ...

  9. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

随机推荐

  1. [20171205]uniq命令的输入输出.txt

    [20171205]uniq命令的输入输出.txt --//前几天遇到XXD与通配符问题,链接http://blog.itpub.net/267265/viewspace-2147702/--//今天 ...

  2. SQLserver 还原数据库报“指定转换无效”的错的解决方案

    最近在附加一个数据库的时候遇到一个问题:“指定转换无效”,经过分析,出现这个问题的原因可能是:1.版本不对.2.文件加密.3.文件损坏 解决方法: 一.版本不对: 1.   首先确定源数据库版本,下面 ...

  3. Linux MySql 安装与配置

    为什么选择MySQL数据库? 毫无疑问,绝大多数的使用linux操作系统的大中小型互联网网站都在使用MySQL作为其后端的数据库存储,从大型的BAT门户,到电商平台,分类门户等无一例都使用MySQL数 ...

  4. 代理ARP--善意的欺骗

    1. 代理ARP(Proxy ARP)是什么? 顾名思义,它指通过中间设备(通常为Router)代替其他主机响应ARP请求.对于没有配置默认网关的主机想要与其他网络的另一台主机通信时,网关收到源主机的 ...

  5. 软件工程实践_Task2_sudoku

    软工实践_Task2 标签(空格分隔): 软工实践 相关要求:第二次作业--个人项目实战 github:传送门 解题思路 先是一点杂谈. 首先,看完作业要求之后,心里先有个大概的框架. 语言:C++ ...

  6. 统计硬币 HDU - 2566 （三种解法：线性代数解法，背包解法，奇思妙想解法 >_< ）

    题号放这里自己去找吧. HDU-2566 这题最开始用的dp,然后,被同学用奇思妙想过了.  >_<  开心! -_- !! 然后,被我线性代数给过了. 方法一:dp 将其化为01背包,只 ...

  7. ethereum/EIPs-1102 Opt-in provider access metamask不再默认直接连入网页

    eip title author discussions-to status type category created 1102 Opt-in provider access Paul Boucho ...

  8. Redis学习笔记--Redis数据过期策略详解==转

    本文对Redis的过期机制简单的讲解一下 讲解之前我们先抛出一个问题,我们知道很多时候服务器经常会用到redis作为缓存,有很多数据都是临时缓存一下,可能用过之后很久都不会再用到了(比如暂存sessi ...

  9. 按行读取.txt文件，并按行写入到新文件中

    package com.test.io; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fi ...

  10. matlab fspecial

    Matlab 的fspecial函数用法 fspecial函数用于建立预定义的滤波算子,其语法格式为:h = fspecial(type)h = fspecial(type,para)其中type指定 ...