CSS 属性:margin
盒子的外边距,位于边框、内边距和内容区域的外部。
使用一个值时,margin 属性可用于为盒子四周指定统一的外边距。使用两个、三个或四个值时,可以独立指定各个边。
可能的值
| 值 | 注意 | 示例 |
|---|---|---|
| [length] | 10px | |
| [percentage] | 以包含块宽度的百分比计算。 | 25% |
auto | ||
inherit | ||
initial | ||
unset | ||
多个值
一个、两个、三个或四个用空格分隔的值
| 值 | 注意 | 示例 |
|---|---|---|
| [值] | [上,右,下,左] | 10px |
| [值] [值] | [上和下] [左和右] | 10px 20px |
| [值] [值] [值] | [上] [右和左] [下] | 10px 20px 30px |
| [值] [值] [值] [值] | [上] [右] [下] [左] | 10px 20px 30px 40px |
示例
#hedgehog { margin: 1em; }
/* Uniform margin of 1em on all four sides */
#hare { margin: 10% 20%; }
/* Top and bottom margins are each 10% of the containing box's width. Left and right margins are each 20% of the containing box's width. */
#shrew { margin: 10% inherit 30px; }
/* Top margin is 10% of the containing box's width. Left and right margins are inherited. Bottom margin is 30px */
#wildcat { margin: 10px 20px 30px 40px; }
/* Top margin is 10px. Right margin is 20px. Bottom margin is 30px. Left margin is 40px. */
