CSS 外边距

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

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

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

CSS 外边距属性

属性 描述

margin 简写属性。在一个声明中设置所有外边距属性。

margin-bottom 设置元素的下外边距。

margin-left 设置元素的左外边距。

margin-right 设置元素的右外边距。

margin-top 设置元素的上外边距。

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

1.设置文本的左外边距

本例演示如何设置文本的左外边距。

p.leftmargin {margin-left:1cm}

这个段落没有指定

这个段落带有指定的左外边距

2.设置文本的右外边距

本例演示如何设置文本的右外边距。

p.rightmargin {margin-right: 8cm}

这个段落没有指定

这个段落带有指定的右外边距。

3.设置文本的上外边距

本例演示如何设置文本的上外边距。

p.topmargin {margin-top: 5cm}

这个段落没有指定

这个段落指定了上外边距。

4.设置文本的下外边距

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

p.bottommargin {margin-bottom:2cm}

这个段落没有指定外边距

这个段落指定了外边距。

5.所有的外边距属性在一个声明中。

本例演示如何将所有的外边距属性设置于一个声明中。

p.margin {margin: 2cm 4cm 3cm 4cm}

这个段落没有指定外边距。

这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。

这个段落没有指定外边距。

CSS外边距叠加问题

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

CSS外边距margin上下元素重叠

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

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

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

CSS外边距合并的几种情况

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

理解CSS外边距margin

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

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

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

CSS 外边距合并。

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

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

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

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

随机推荐

ggplot2 学习笔记 (持续更新.....)

1. 目前有四种主题 theme_gray(), theme_bw() , theme_minimal(),theme_classic() 2. X轴设置刻度 scale_x_continuous(l ...

浅谈用java解析xml文档(三)

接上一篇,本文介绍使用JDOM解析xml文档, 首先我们还是应该知道JDOM从何而来,是Breet Mclaughlin和Jason Hunter两大Java高手的创作成果,2000年初, JDOM作 ...

Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类

Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类 转载自http://www.trinea.cn/android/android-common-lib/ 介绍总结的一 ...

搭建Mantis 缺陷管理系统

什么是Mantis MantisBT is a free popular web-based bugtracking system (feature list). It is written in t ...

JSP基本语法--实例演练

基本语法概括:,,, 加上数据库操作,可以开发动态web了. ...

C socket post数据到url

#define HOST_SERVER_IP "192.168.1.15" #define HOST_PORT 80 int gsh_post_clients(const char ...

Thrift教程初级篇——thrift安装环境变量配置第一个实例

前言: 因为项目需要跨语言,c++客户端,web服务端,远程调用等需求,所以用到了RPC框架Thrift,刚开始有点虚,第一次接触RPC框架,后来没想到Thrift开发方便上手快,而且性能和稳定性也不 ...

Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

samba服务配置(一)

samba是一个实现不同操作系统之间文件共享和打印机共享的一种SMB协议的免费软件. samba软件结构: /etc/samba/smb.conf    #samba服务的主要配置文件 /etc/sa ...

C#操作Exchange配置

1.客户端配置:运行gpedit.msc进入本地组策略管理器,计算机配置>管理模版>Windows组件>WinRM>WinRM客户端启用允许未加密通信:启用受信任的主机并添加e ...