DevShelf

Appearance

margin ​

margin ​

描述 ​

margin 属性是允许您一次设置元素的所有四个边距的简写。其等效的普通属性是 margin-top、margin-right、margin-bottom 和 margin-left。负值也是允许的。

效果展示 ​

语法 ​

css
/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;

值 ​

  • <length> 指定固定宽度。允许负值。
  • <percentage> 相对于包含块的宽度的百分比。允许负值。
  • auto auto 被替换为一些合适的值，例如它可用于块的居中。

margin-bottom ​

描述 ​

元素的 margin-bottom 属性设置元素底部所需的边距空间。负值也是允许的。

效果展示 ​

语法 ​

css
/* <length> values */
margin-bottom: 10px; /* An absolute length */
margin-bottom: 1em; /* relative to the text size */
margin-bottom: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-bottom: auto;

/* Global values */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: revert;
margin-bottom: revert-layer;
margin-bottom: unset;

值 ​

  • <length> 指定固定宽度。允许负值。
  • <percentage> 相对于包含块的宽度的百分比。允许负值。
  • auto

margin-left ​

描述 ​

元素的 margin-left 属性设置元素左侧所需的边距空间。负值也是允许的。

效果展示 ​

语法 ​

css
/* <length> values */
margin-left: 10px; /* An absolute length */
margin-left: 1em; /* relative to the text size */
margin-left: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-left: auto;

/* Global values */
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;

值 ​

  • <length> 指定固定宽度。允许负值。
  • <percentage> 相对于包含块的宽度的百分比。允许负值。
  • auto

margin-right ​

描述 ​

元素的 margin-right 属性设置元素右侧所需的边距空间。负值也是允许的。

效果展示 ​

语法 ​

css
/* <length> values */
margin-right: 20px; /* An absolute length */
margin-right: 1em; /* relative to the text size */
margin-right: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-right: auto;

/* Global values */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;

值 ​

  • <length> 指定固定宽度。允许负值。
  • <percentage> 相对于包含块的宽度的百分比。允许负值。
  • auto

margin-top ​

描述 ​

元素的 margin-top 属性设置元素顶部所需的边距空间。负值也是允许的。

效果展示 ​

语法 ​

css
/* <length> values */
margin-top: 10px; /* An absolute length */
margin-top: 1em; /* relative to the text size */
margin-top: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-top: auto;

/* Global values */
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;

值 ​

  • <length> 指定固定宽度。允许负值。
  • <percentage> 相对于包含块的宽度的百分比。允许负值。
  • auto