是否可以使用CSS在单行中指定所有属性（顶部，底部，左侧，右侧）

Question

我想在一行 CSS 中指定所有属性（顶部、右侧、底部、左侧），就像我们指定的方式一样

margin:50px; ( margin-top:50px,margin-right:50px,margin-bottom:50px,margin-left:50px )

有什么办法可以做到这一点吗？

谢谢你

Answer 1

是的，正确的方法是这样的。 它位于右上角左下角。

margin: 10px 20px 50px 30px;

所以它

margin: top right bottom left;

好吧，我不确定你在问什么。还是。

所以我会尽力的。

保证金的运作方式如下。正如你所说，有 4 个边，右上左下，顺时针运动。

您可以像我上面所做的那样针对每个目标，或者如果它们都相同，您可以这样做

margin: 20px;

但是，如果左侧和右侧相同，顶部和底部也相同，则可以这样做

margin: 20px 30px;

例如我用

margin: 0 auto;

一直

你也可以做

margin: 20px 30px 10px;

将以 20 像素定位顶部，以 30 像素定位右侧，以 10 像素定位底部，以 30 像素定位左侧

如果你只想要权利，你可以这样做

右边距：20px；

同样适用于上边距、下边距、左边距。

Answer 2

最简单的方法是使用

inset

属性。

例如，两者

top: 5px;
bottom: 10px;
left: 8px;
right: 8px;

和

inset: 5px 8px 10px 8px;

做同样的事情。

您可以在这里找到更深入的信息和示例：https://developer.mozilla.org/en-US/docs/Web/CSS/inset

Answer 3

所以您问如何在一行上指定

margin-top

、

margin-left

、

margin-bottom

和

margin-right

？

简单：

您可以使用例如。

margin: 25px 50px 75px 100px;

。这将导致相同的结果：

margin-top: 25px;
margin-right: 50px;
margin-bottom: 75px;
margin-left: 100px;

这同样适用于

padding

属性。

查看更多http://devdocs.io/css/margin 和 http://devdocs.io/css/padding

Answer 4

您可以像这样使用

inset

：

inset: 5px 3px 1px 10px;

顺序是

top

、

right

、

bottom

、

left

Answer 5

在线赋值有很多选项：

1. 所有边的值相同：

   margin:10px;

2. 所有边都需要不同的值：

   margin:10px 20px 30px 40px

   （上、右、下、左）
3. 上下和左右需要相同的值：

   margin: 10px 30px;

   （上下，左右）。

与您可以在填充中使用的所有内容相同。

Answer 6

您可以利用 CSS 中的 inset 属性来定义元素在其容器内的位置。它允许您指定元素的顶部、右侧、底部和左侧的值。

例如，您可以如下设置：

inset: 5px 3px 1px 10px;

在本例中，这些值分别对应于上边距、右边距、下边距和左边距。因此，该元素将位于其容器内距顶部 5 像素、距右侧 3 像素、距底部 1 像素和距左侧 10 像素的位置。

或者，如果您希望所有方向的像素值相同，您可以将其简化为：

inset: 3px;