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. python TCP socket套接字编程以及注意事项

    TCPServer.py #coding:utf-8 import socket #s 等待链接 #c 实时通讯 s = socket.socket(socket.AF_INET,socket.SOC ...

  2. xunit-ICollectionFixture

      https://github.com/dmetzgar/dotnetcoreinaction

  3. 使用navicat 连接mysql出现1251错误

    最近需要用MYSQL,使用navicat 连接时总出现1251错误,在网上查了一些别人的方法并试过 以下方法是正确的. 方法来自:https://blog.csdn.net/XDMFC/article ...

  4. 转://oracle 11gR2 oracle restart 单机使用asm存储 主机名发生更改处理过程

    oracle 11gR2 oracle restart 单机使用asm存储 主机名发生更改并且主机重启后处理过程: 以下为解决方案: 1. Remove Oracle Restart configur ...

  5. JavaScript中的typeof操作符用法实例

    在Web前端开发中,我们经常需要判断变量的数据类型.鉴于ECMAScript是松散类型的,因此需要有一种手段来检测给定变量的数据类型——typeof就是负责提供这方便信息的操作符.   对一个值使用t ...

  6. 转载 SpringMVC详解（一）------入门实例

    目录 1.什么是 SpringMVC ? 2.创建 web 工程,并导入相应的 jar 包. 3.新建 SpringMVC 全局配置文件 4.在 web.xml 文件中配置前端过滤器 5.编写处理器  ...

  7. 配置Linux下vim自动缩进等功能

    从终端打开配置文件: vim ~/.vimrc 添加如下代码: set tabstop=4 set softtabstop=4 set shiftwidth=4 set autoindent set ...

  8. Intellij Idea免费激活方法(转)

    文章转自  http://blog.csdn.net/u013772876/article/details/70763759 1.填入下面的license server: http://intelli ...

  9. css学习之样式层级和权重

    第一种情况 当选择器相同的情况下,引入方式的前后,决定页面最后的效果 ---------外部在最后面显示 ---------内部在最后面显示 第二种情况 引入方式相同时候,则是按照权重取最大(取权重最 ...

  10. PAT A1127 ZigZagging on a Tree （30 分）——二叉树，建树，层序遍历

    Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...