如何设置只有垂直内边距？

Question

有时我想在元素上明确设置顶部和底部填充，但将左右填充保留为未更改的浏览器默认值。 我知道我可以这样写：

.myElement { padding-top: 20px; }
.myElement { padding-bottom: 20px; }

但这种方式需要重复两次选择器.myElement和长度值，或者复制整行并将左右交换。

我希望找到更少冗余的方法，所以我尝试使用带有两个值的padding，并将第二个长度替换为inherit。 我知道这不是好的CSS，这只是一个尝试，但它也不起作用（将水平填充设置为0）：

.myElement { padding: 20px inherit; }

请看这里：http://jsfiddle.net/185ty3yp/

有什么建议可以做得更好吗？

- GOTO 0

Answer 1

如果我理解你的需求正确：你正在寻找一种只使用 padding 属性来设置垂直内边距（并保留原有的水平内边距，如果已经存在）的方法。

所以，你已经得到了答案：

.myElement { padding-top: 20px; padding-bottom: 20px;  }

仅使用padding属性是无法实现这一点的，你需要设置水平值。

或者，你可以考虑使用CSS预处理器（如Sass或Less），它肯定会帮助你实现这一点。

- enguerranws

---

在我看来，似乎你是唯一一个真正读完整个问题的人。 - Butt4cak3

根据我看到的其他答案，我只能同意你的观点。 - enguerranws

Answer 2

现在你可以这样做：

.myElement { padding-block: 20px; }

浏览器支持

- Adam Taylor

Answer 3

你可以使用 padding-block 属性设置垂直方向的内边距，使用 padding-inline 设置水平方向的内边距。

padding-block: 20px; /*vertical padding */
padding-inline: 20px; /*horizontal padding*/

同样适用于边距，使用margin-block设置垂直边距，使用margin-inline设置水平边距。 margin-inline: auto;可用于居中一个div。

- Jibin John

Answer 4

我理解找到垂直填充的原因之一可能是希望在未来修改时只更改一个地方。如果是这样，我们可以尝试以下方法：

.element{
    --title-vertical-padding: 20px;
    padding-top: var(--title-vertical-padding);
    padding-bottom: var(--title-vertical-padding);
}

- Ian 1989

Answer 5

#ul1, #ul2{
  padding:20px 0; /* top and bottom 20px, left and right 0 */
}

http://www.w3schools.com/css/css_padding.asp

很抱歉，您只能将填充设置为固定长度或百分比，没有其他可选的值。

- Gho

Answer 6

尝试这段代码 DEMO

#ul1, #ul2 {
    background-color: cyan;
    padding-top: 20px;
    padding-bottom: 20px;
}

#ul2 {
    background-color: yellow;
}

- Alex Wilson

Answer 7

你可以试试这样做

padding: 20px 50px 75px 100px;

//top padding is 20px
//right padding is 50px
//bottom padding is 75px
//left padding is 100px

在您的情况下，如果对于任何ul都是常见的，您可以这样应用。

ul
{
  padding-top: 20px;
  padding-bottom: 20px;
}

你可以覆盖这个 CSS 的任何特定位置。

查看 演示。

- Seminda