📌  相关文章
📜  CSS Margin属性

📅  最后修改于: 2020-11-04 06:30:36             🧑  作者: Mango

CSS Margin属性

CSS Margin属性用于定义元素周围的空间。它是完全透明的，没有任何背景色。清除元素周围的区域。

顶部，底部，左侧和右侧的边距可以使用单独的属性独立更改。您还可以使用速记边距属性一次更改所有属性。

有以下CSS边距属性：

CSS保证金属性

Property Description
margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin-bottom It is used to set bottom margin of an element.

CSS保证金值

这些是保证金属性的可能值。

Value Description
auto This is used to let the browser calculate a margin.
length It is used to specify a margin pt, px, cm, etc. its default value is 0px.
% It is used to define a margin in percent of the width of containing element.
inherit It is used to inherit margin from parent element.

注意：您也可以使用负值来重叠内容。

CSS边距示例

您可以为元素的不同面定义不同的边距。








This paragraph is not displayed with specified margin. 


This paragraph is displayed with specified margin.

输出：

此段落未以指定的边距显示。

此段落以指定的边距显示。

保证金：简写财产

CSS速记属性用于缩短代码。它在一个属性中指定所有边距属性。

有四种类型可以指定margin属性。您可以使用其中之一。

  • 边距：50px 100px 150px 200px;
  • 边距：50px 100px 150px;
  • 边距：50px 100px;
  • 边距50px;

1)保证金：50px 100px 150px 200px;

它表明：

上边距值为50px

右边距值为100px

底边距值为150px

左边距值为200px








This paragraph is not displayed with specified margin. 


This paragraph is displayed with specified margin.

输出：

此段落未以指定的边距显示。

此段落以指定的边距显示。

2)边距：50px 100px 150px;

它表明：

上边距值为50px

左右边距值为100px

底边距值为150px








This paragraph is not displayed with specified margin. 


This paragraph is displayed with specified margin.

输出：

此段落未以指定的边距显示。

此段落以指定的边距显示。

3)保证金：50px 100px;

它表明：

顶部和底部边距值为50px

左右边距值为100px








This paragraph is not displayed with specified margin. 


This paragraph is displayed with specified margin.

输出：

此段落未以指定的边距显示。

此段落以指定的边距显示。

4)边距：50px；

它表明：

右上角左下角的值是50px








This paragraph is not displayed with specified margin. 


This paragraph is displayed with specified margin.

输出：

此段落未以指定的边距显示。

此段落以指定的边距显示。