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

【问题标题】：Is it possible to specify all properties ( top,bottom,left,right ) in single line using CSS是否可以使用 CSS 在单行中指定所有属性（顶部、底部、左侧、右侧）
【发布时间】：2021-11-11 23:17:28
【问题描述】：

我想在一行 CSS 中指定所有属性（ top,right,bottom,left ），就像我们如何指定 margin:50px; ( margin-top:50px,margin-right:50px,margin-bottom:50px,margin-left:50px )

有什么办法吗？

谢谢

【问题讨论】：

是的，您可以在单行 css 中使用所有属性
@MrLister 这绝对是可能的，它被称为 CSS 速记。 Unifx 答案显示了正确的方法。看看这里：developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties 以获得详细解释:)
啊 - 我假设你认为他在问他是否可以用简写形式定义 top: 0px; left:0px; 等的 CSS 规则。一开始我也是这么想的，直到我读了第一个答案，然后重新读了这个问题；）
我的理解和@Mr Lister 一样，我认为OP 想使用top、bottom、right 和left 属性的简写
在这种情况下是不可能的，这里有一个类似的问题。 stackoverflow.com/questions/10855276/…

标签： html css border

【解决方案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 像素为左侧

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

margin-right: 20px;

margin-top、margin-bottom、margin-left 也是如此。

【讨论】：

可能值得添加（为了兴趣/便于记忆）顺序从顶部开始顺时针方向。 :)
是的，我明白了，我的问题是通常我们会在某个时候使用 right:0,top:0,left:0,bottom:0，我们需要写四次而不是像这样写有没有单行书写方式（例如 margin:10px ）
@Frits 这是我记得它的唯一方式——记住 = 用手移动：}
是的，现在自然而然了哈哈，以前一直把我搞砸了

【解决方案2】：

所以你问如何在一行中指定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 属性。

【讨论】：

【解决方案3】：

最简单的方法是使用inset 属性。

例如，两者都

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

和

inset: 5px 8px 10px 8px;

做同样的事情。

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

【讨论】：

【解决方案4】：

在线赋值有很多选择：

所有边的值相同：margin:10px;
所有边都需要不同的值：margin:10px 20px 30px 40px（上、右、下、左）
top-bottom 和 left-right 需要相同的值：margin: 10px 30px;(top-bottom, left-right)。

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

【讨论】：

【解决方案5】：

你可以像这样使用inset：

inset: 5px 3px 1px 10px;

顺序为top、right、bottom、left

【讨论】：