CSS 外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

################

CSS 外边距属性
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom  设置元素的下外边距。
margin-left    设置元素的左外边距。
margin-right   设置元素的右外边距。
margin-top 设置元素的上外边距。
####################

1.设置文本的左外边距
本例演示如何设置文本的左外边距。
    <style type="text/css">
        p.leftmargin {margin-left:1cm}
    </style>
</head>
<body>
<p>这个段落没有指定</p>
<p class="leftmargin"> 这个段落带有指定的左外边距</p>
</body>

2.设置文本的右外边距
本例演示如何设置文本的右外边距。
    <style type="text/css">
        p.rightmargin {margin-right: 8cm}
    </style>
</head>
<body>
<p>这个段落没有指定</p>
<p class="rightmargin"> 这个段落带有指定的右外边距。</p>
</body>

3.设置文本的上外边距
本例演示如何设置文本的上外边距。
    <style type="text/css">
        p.topmargin {margin-top: 5cm}
    </style>
</head>
<body>
<p>这个段落没有指定</p>
<p class="topmargin"> 这个段落指定了上外边距。</p>
</body>

4.设置文本的下外边距
本例演示如何设置文本的下外边距。

    <style type="text/css">
        p.bottommargin {margin-bottom:2cm}

    </style>
</head>
<body>
<p>这个段落没有指定外边距</p>
<p class="bottommargin">这个段落指定了外边距。</p>
</body>

5.所有的外边距属性在一个声明中。
本例演示如何将所有的外边距属性设置于一个声明中。
    <style type="text/css">
    p.margin {margin: 2cm 4cm 3cm 4cm}
    </style>
</head>

<body>

<p>这个段落没有指定外边距。</p>

<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>

<p>这个段落没有指定外边距。</p>

</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. [20180705]关于hash join 2.txt

    [20180705]关于hash join 2.txt --//昨天优化sql语句,执行计划hash join right sna,加入一个约束设置XX字段not null,逻辑读从上万下降到50.- ...

  2. SMBus与I2C的差别

    The I²C bus and the SMBus are popular 2-wire buses that areessentially compatible with each other. - ...

  3. input子系统事件处理层(evdev)的环形缓冲区【转】

    在事件处理层(evdev.c)中结构体evdev_client定义了一个环形缓冲区(circular buffer),其原理是用数组的方式实现了一个先进先出的循环队列(circular queue), ...

  4. Nginx Linux安装与部署

    Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行. ...

  5. Android 接收系统广播(动态和静态)

    1.标准广播:是一种完全异步执行的广播,在广播发出之后,所有的广播接收器几乎会在同一时刻接收到这条广播信息,它们之间没有先后顺序.效率高.无法被截断. 2.有序广播:是一种同步执行的广播,在广播发出后 ...

  6. Spring RestTemplate 中文乱码问题

    1.原因 由于RestTemplate的默认构造方法初始化的StringHttpMessageConverter的默认字符集是ISO-8859-1,所以导致RestTemplate请求的响应内容会出现 ...

  7. iOS-省市区选择的实现

    一.简介 该文主要实现的是省市区的选择,可在个人修改地址的地方使用. 二.需要的东西 制作这个首先需要一个area.plist文件,该文件中保存这所有的关于省市区的信息,下载地址:http://pan ...

  8. 【微信JSSDK】PHP版微信录音文件下载

    微信的录音文件上传到微信服务器上,只能保存三天. 因此需要做一个转存到自己服务器,或者七牛云的操作. 转存到自己服务器 调用微信JSSDK API 录音, 录音结束,上传到微信服务器,获取录音文件的 ...

  9. Java基本数据类型转换

    一:Java的基本数据类型和引用数据类型 1:基本数据类型 2:引用数据类型 二:基本数据的类型转换 基本数据类型中,布尔类型boolean占有一个字节,由于其本身所代码的特殊含义,boolean类型 ...

  10. Python 操作 Excel，总有一个模块适合自己

    最近在写性能相关的测试脚本,脚本已经完成,最终怎么体现在报告上,要想让报告看起来漂亮些,我们是先创建一个模板(格式和公式已全部制作好),只需要性能测试完成后往对应的sheet页中填充数据,数据完成后最 ...