如何只设置垂直填充？

Question

有时我想在元素上显式设置top和bottom padding，但是将左右填充保留为未更改的浏览器默认值。我知道我可以写

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

但是这样我需要重复选择器.myElement和长度值两次 - 或者更确切地说，复制并粘贴整行并向右切换。 我希望找到一些不那么冗余的东西，所以我尝试将padding用于两个值，并用inherit替换第二个长度。这不是好的CSS，我知道，这是一次尝试，但它也不起作用（将水平填充设置为0）：

.myElement { padding: 20px inherit; }

见这里：http://jsfiddle.net/185ty3yp/

有任何建议如何做得更好？

Answer 1

如果我理解你想要的东西：你正在寻找一种方法来只分配具有padding属性的垂直填充（并保留原始水平填充，如果已设置）。

所以你已经有了答案：

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

您不能只使用padding属性，或者您需要设置水平值。

或者，您可以考虑使用 CSS预处理器（例如Sass或更少），它肯定会帮助您实现这一目标。

Answer 2

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

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

你只能将填充设置为固定长度或百分比，没有其他值我害怕

Answer 3

尝试此代码DEMO

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

#ul2 {
    background-color: yellow;
}

Answer 4

您可以尝试这样

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的任何特定位置。

检查Demo