div+css - CSS标准 - 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' - 8.3边距属性
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
-
- Specifies a fixed width.
-
- 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: | 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: | 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: {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有效