div+css - CSS标准 - 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' - 8.3边距属性

最新推荐文章于 2022-06-03 15:54:09 发布

胡争辉

最新推荐文章于 2022-06-03 15:54:09 发布

阅读量2.9k

点赞数

分类专栏： div+css 文章标签： css properties div firefox table microsoft

本文为博主（@胡争辉）原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/hu_zhenghui/article/details/1881046

版权

div+css 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

div+css - CSS标准 - 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' - 8.3边距属性

8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

The properties defined in this section refer to the <margin-width> value type, which may take one of the following values:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

auto

See the section on calculating widths and margins for behavior.

Negative values for margin properties are allowed, but there may be implementation-specific limits.

'margin-top', 'margin-bottom'

Value:	<margin-width> \| inherit
Initial:	0
Applies to:	all elements except elements with table display types other than table-caption, table and inline-table
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual
Computed value:	the percentage as specified or the absolute length

These properties have no effect on non-replaced inline elements.

'margin-right', 'margin-left'

Value:	<margin-width> \| inherit
Initial:	0
Applies to:	all elements except elements with table display types other than table-caption, table and inline-table
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual
Computed value:	the percentage as specified or the absolute length

These properties set the top, right, bottom, and left margin of a box.

h1 { margin-top: 2em }

'margin'

Value:	<margin-width>{1,4} \| inherit
Initial:	see individual properties
Applies to:	all elements except elements with table display types other than table-caption, table and inline-table
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual
Computed value:	see individual properties

The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

The last rule of the example above is equivalent to the example below:

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */
}

[8.3边距属性 - 文档]

http://www.w3.org/TR/CSS21/box.html#margin-properties

[div+css - 关键词]

div css

[div+css - 论坛]

http://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/, homepage看版
http://forum.csdn.net/SList/HTMLCSS/
http://groups.google.com/group/alt.html
http://groups.google.com/group/comp.infosystems.www.authoring.html
http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets

[div+css - 工具]

Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

The W3C Markup Validation Service:, http://validator.w3.org/

微软印刷技术 - 自由字体信息, TrueType, OpenType, ClearType:, http://www.microsoft.com/typography/default.mspx

微软印刷技术 - WEFT 3 - 网页嵌入字体3 - 下载, http://www.microsoft.com/typography/web/embedding/weft3/download.aspx

微软印刷技术 - WEFT 3 - 网页嵌入字体3 - 向导, http://www.microsoft.com/typography/web/embedding/weft3/wizard.aspx

Microsoft Typography微软印刷技术 - WEFT 3网页嵌入字体3 - Wizard向导 - Create font objects创建字体对象, http://www.microsoft.com/typography/web/embedding/weft3/wizard.aspx#create

[div+css - 常见问题]

较验div+css格式， http://validator.w3.org/
div+css的margin缩写方式
div+css的padding缩写方式
链接的:link,:visited,:hover,:active四种状态

div+css使用backgroundRepeat样式设置背景图片的显示方式, http://msdn2.microsoft.com/en-us/library/ms530721.aspx

page-break-before设置打印分布符

url()指示符, http://www.w3.org/TR/CSS21/syndata.html#value-def-uri

!important规则, http://www.w3.org/TR/CSS21/cascade.html#important-rules

table中直接输入的文字和其他标记设置不同的颜色

CSS标准中级联的文档, http://www.w3.org/TR/CSS21/cascade.html#cascade

[div+css - Firefox和IE浏览器兼容问题]

水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记，Firefox支持!important标记，IE6忽略!important标记，!important需要放在前面才能起作用
手形鼠标指针，使用cursor: pointer;
padding的尺寸，在Firefox中padding是计算在width之外的，而IE6是计算在width之内的
margin的尺寸，在IE6中带有float样式的元素的margin尺寸计算有误，需要借助padding和!important标记实现兼容

使用word-wrap设置自动折行, 仅对IE有效

<li style="overflow:hidden">在Firefox下会丢失左侧的圆点

Internet Explorer的CSS参考资料, http://msdn2.microsoft.com/en-us/library/ms531209.aspx

用CSS实现cellSpacing属性效果, border-spacing: 10px; border-spacing: expression(this.cellSpacing=10);

padding-right在IE6下导致抖动