CSS margin 属性详解

设置 p 元素的 4 个外边距:

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



定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。

例子 1

margin:10px 5px 15px 20px;
  • 上外边距是 10px
  • 右外边距是 5px
  • 下外边距是 15px
  • 左外边距是 20px

例子 2

margin:10px 5px 15px;
  • 上外边距是 10px
  • 右外边距和左外边距是 5px
  • 下外边距是 15px

例子 3

margin:10px 5px;
  • 上外边距和下外边距是 10px
  • 右外边距和左外边距是 5px

例子 4

margin:10px;
  • 所有 4 个外边距都是 10px
默认值: 0
继承性: no
版本: CSS1
JavaScript
语法:
object.style.margin="10px
5px"

可能的值

描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是
0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。
时间: 2024-11-02 05:21:20

CSS margin 属性详解的相关文章

CSS滤镜属性详解

css|滤镜|详解 ·CSS滤镜:Mask属性 Mask属性为对象建立一个覆盖于表面的膜 ·CSS滤镜:blur属性 假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊.CSS下的blur属性就会达到这种模糊的效果 ·CSS滤镜:Chroma属性 Chroma属性可以设置一个对象中指定的颜色为透明色 ·CSS滤镜:DropShadow属性 DropShadow属性是为了添加对象的阴影效果的 ·CSS滤镜:FlipH.FlipV属性 Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,

margin属性详解

margin在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. 一.margin的基本特性 margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area.属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距. margin属性可以应用于几乎所有的元素,除了表格显示类型(不包括 tab

CSS透明属性详解及背景透明继承解决办法hack

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:  代码如下 复制代码 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera. filter:alpha(opacity=50); 这个

CSS透明属性详解代码_CSS/HTML

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 复制代码 代码如下: .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}  上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.filter:alpha(opacity=50); 这个是为IE6设

CSS透明属性详解

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera. filter:alpha(opacity=50); 这个是为IE6设的,可取值

CSS Overflow属性详解(转)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容.所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属性值为 hidden 将隐藏其滚动条. overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflow的姐妹属性overflow-y 和overflow-x,它们很少被采用. Visible 如果你不设置overflow属性,则默认的o

CSS标签语法:详解选择符中的关系选择符

文章简介:CSS标签语法:详解选择符中的关系选择符. 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪对象选择符.在众多的选择符中,可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写,达到最大的质量和效率. 今天就为大家介绍下选择符中的关系选择符,"关系"这可是一等一的大事啊,我们得理清楚,这样做事情才能更加的有效率.不然在CSS中有你受的,哈哈.关系选择符有四个类别:包含选择符.子选择符.相邻选择符.兄弟选择符.接下来

鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

 这篇文章主要介绍了鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解,需要的朋友可以参考下     screenY 鼠标相对于显示器屏幕左上角的偏移 pageY 鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响) IE9之下并不支持这个属性 但是可以写点代码计算出来. jQuery中的实现:   代码如下: // Calculate pageX/Y if missing and clientX/Y available if ( event.pageX

marquee标签属性详解

html教程,marquee标签属性详解. 请大家先看下面这段代码 <marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()> 此处输入滚动内容 </marquee>