Question

我知道我可以像这样声明顶部和底部的边距;

  margin: 10px 6px;

我知道所有的一切;

 margin: 10px;

我知道所有个人;

 margin: 0 8px 9px 1px;

但是在某些网站上，我看过像

这样的例子

 margin: 2px 2px 0;

和

 margin: 0 8px 2px;

任何人都在意解释这是如何运作的？

Answer 1

边距和填充按此顺序定义：

T - top
R - 右
B - Bottom
L - 左

短手：

margin: a;      /*= a a a a*/
margin: a b;    /*= a b a b*/
margin: a b c;  /*= a b c b*/
margin: a b c d;/*= a b c d*/
/*Where a, b, c and d are values. Valid values consists of at least one digit
 * and a unit, e.g.: 12px. 0 (zero) doesn't require a unit */

Answer 2

这是w3schools is a fine reference。

的一个实例

保证金：25px 50px 75px;


上边距为25px

左右边距为50px

下边距为75px

其他参考：

Answer 3

margin: 1px 2px 3px;

与

相同

margin: 1px 2px 3px 2px;

Answer 4

首先解释这种语法可能会有所帮助：

margin: 5px 10x;

在你提出的问题中，你提到这可以让你设置顶部和底部边距，但这并不完全正确。双值语法指定用于顶部和底部的值，然后是左侧和右侧。例如，上面的代码在顶部和底部指定5px页边距，在左侧和右侧指定10px页边距。

如果我们添加第三个值：

margin: 5px 10px 15px;

...它的行为与上面的双值语法相同，但将底部边距设置为15px。因此，要明确说明，此处的三个值指定顶部应为5px，左侧和右侧应为10px，底部应为{{1} }}

Answer 5

订单是顶部，右侧，底部，左侧。丢失最后一个值（左侧）将告诉解析器从已提供的正确值（第二个值）继承左值。

Answer 6

在CSS中，你可以设置速记从1到4种方式来满足条件：这是一个简短的细分

4路

margin:Npx NNpx NNNpx NNNNpx;
top margin = N, right = NN, bottom = NNN, left = NNNN

3路

margin:Npx NNpx NNNpx;
top margin = N, right and left = NN, bottom = NNN75px

2路

margin:Npx NNpx;
top and bottom margins = N, right and left = NN

1种方式

margin:Npx;
all four margins = N

css边距，填充样式

6 个答案: