css - 如果空间可用，添加水平边距

Question

我想添加 40 像素的左边距，如果空间可用。如果父宽度不够，让我们减少它。

示例:如果父级只有 420 像素宽，则边距应减少到 20 像素。

如何做到这一点？

* {margin: 0; padding: 0;}
#parent {resize: both; border: 2px solid; overflow:auto; width: 500px; }
#margin { display: inline-block; background-color: blue; width: 40px; }
#main { display: inline-block; background-color: red; width: 400px; }

<div id="parent">
<div id="margin">&nbsp;</div>
<div id="main">&nbsp;</div>
</div>

Answer 1

您可以使用 media queries为此。

@media screen and (max-width: 420px) {
  #margin { width: 20px }
}

https://jsfiddle.net/0evabfLa/

这是上面代码的动画，当页边距改变时背景变成黄色。