CSS的margin属性

margin属性的定义和用法:

检索或设置对象四边的外延边距。

如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

如果只提供一个,将用于全部的四边。

如果提供两个,第一个用于上、下,第二个用于左、右。

如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

内联对象可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。

外延边距始终透明。

对应的脚本特性为margin

语法结构:

margin:auto | <length> | <percentage>

取值:

auto:值被设置为相对边的值,默认值。

<length>:用长度值来定义外补白。可以为负值。

<percentage>:用百分比来定义外补白。可以为负值。

浏览器支持:

IE浏览器支持此属性。

火狐浏览器支持此属性。

谷歌浏览器支持此属性。

opera浏览器支持此属性。

继承性:

没有继承性。

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
.father{
  width:200px;
  height:200px;
  border:1px solid #000
}
.children{
  width:100px;
  height:100px;
  border:1px solid #093;
  margin:10px;
}
</style>
</head>
<body>
<div class="father">
  <div class="children">蚂蚁部落欢迎您!</div>
</div>
</body>
</html>

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0525/2443.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=1387

时间: 2024-10-07 07:36:26

CSS的margin属性的相关文章

CSS中margin属性详解

margin属性概述margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位,可以是像素.英寸.毫米或 em. 相关属性margin 可以单独改变元素的上,下,左,右边距.也可以一次改变所有的属性. 使用语法1.使用单独属性设置四边的距离 #d2 { border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */ margin-top: 20px; /*上边距为20px*/ margin-right: 30px; /*右边距为

(九)学习CSS之margin属性

参考: 所有浏览器都支持 margin 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距.行内元素的的左右外边距不会合并.同样地,浮动元素的外边距也不会合并.允许指定负的外边距值,

CSS之margin属性

A.如果提供全部四个参数值,将按上.右.下.左的顺序作用于四边. B.如果只提供一个,将用于全部的四边. C.如果提供两个,第一个用于上.下,第二个用于左.右. D.如果提供三个,第一个用于上,第二个用于左.右,第三个用于下. D.内联对象可以使用该属性设置左.右两边的外补丁:若要设置上.下两边的外补丁,必须先使该对象表现为块级或内联块级. F.外延边距始终透明.

CSS padding margin border属性详解

图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响.

CSS盒模型之margin属性

CSS中,盒模型是一个很重要的思想概念,在处理盒模型的时候,有一些问题需要注意,特别记录在此. 首先,一个"盒子"是由内边距.外边距.边框以及内容构成的,当设置了元素的margin属性时,会影响当前元素的一些状态.例如,两个盒子在页面中, 一个在上,一个在下,同时设置了两个盒子的margin属性时,按理说两个盒子的边框距离应该是两个margin属性值的叠加,但由于CSS的设计导致事实并非如此, 这两个盒子之间的边框距离将会是两个margin属性中比较大的那一个,如果需求就是要让两个盒子

深入理解css中的margin属性

转载自  http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些"坑".这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间

css中之margin属性

css中之margin属性 css中的margin属性看似简单,但是有时稍有不慎,就会造成错误.这篇博文我会和大家分享将margin属性用在父元素和子元素之间可能出现的状况. 例1: 效果如下所示: 对于这样的结果毫无疑问,可是如果我们希望绿色的div可以靠下面一些,即上边不要紧贴着红色div.既然是两个div的间距,我们可以在绿色div上使用margin-top来使之分离吗?看下面的例子. 例2 我们在上面(例1)的代码中加margin-top:50px;于绿色div的css中,效果如下所示:

转-CSS padding margin border属性详解

原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,b

CSS margin属性与用法教程

margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的. margin属性包含了margin left :距左元素块距离(设置距左内边距) :margin top:距头顶(上)元素块距离(设置距顶部元素块距离):margin right :距右元素块距离(设置距右元素块距) :margin bottom :底元素块距离(设置距低(下)元素块距).其二维构建图可见CSS属性二维图. margin的解剖图