仅更改一个padding属性轴,使用媒体查询维护另一个

Question

我在以下位置设置了以下填充div:

padding: 14px 150px;

我想只更改左/右属性,但不使用媒体查询触摸顶部/底部填充.

@media screen and (max-width: 700px){
     #paddingDiv{
         padding: same as before (t/b)  change (l/r)
     }
}

唯一让我想到的东西(我找不到任何类似的东西,这很奇怪,所以也许我正在以错误的方式寻找)而不改变顶部/底部填充是如下所示:

@media screen and (max-width: 700px){
     #paddingDiv{
         padding-left: 14px;
         padding-right: 14px;
     }
}

例如,div具有以下默认CSS属性:

#paddingDiv{
  height: 200px;
  width: 400px;
  padding: 14px 150px;
  background-color: red;
}

例子.

注意:当然,你可以top/bottom再次填充,但不是我想要的.我不想重写不需要修改的轴.像这样:

@media screen and (max-width: 700px){
     #paddingDiv{
         padding: 14px 14px;
     }
}

注意2:为了避免混淆,我将top/bottom填充设置为left/right与我的示例相同以使其清晰(从大填充放置一个非常小的填充)但是假设它们top/bottom是不同的left/right.总之:只改变left/rightpadding属性维护top/bottompadding属性.

是否可以将其放在一行中而不重复top/bottom填充相同的值？

提前致谢!

Answer 1

根据CSS工作组规范和MDN提供的文档,似乎没有单行快捷方式仅用于指定水平填充.

根据MDN,

padding属性是一种速记,可以避免单独设置每一面(padding-top,padding-right,padding-bottom,padding-left).

该短手的可用组合是:

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em; 

/* top | right | bottom | left */
padding: 2px 1em 0 1em;

请参阅参考:

MDN对填充的定义.

CSSWG目前的草案.

W3 Box模型填充属性.