css - CSS に min-margin プロパティがないのはなぜですか?

Question

.wrapperクラシックを中央に配置したいと想像してみてください。margin: 0 auto; しかし、ウィンドウが縮小したときに、ラッパーに少なくとも 20 ピクセルのマージンがあることを確認したいと考えています。

min-margin物件はどこですか？

というか、これをどのようにシミュレートすればよいでしょうか。(本体のパディングは良い解決策ではありません)

Answer 1

これは、 CSS3 メディア クエリで実現できます。

@media screen and (max-width:200px) {
    .wrapper {
        width:160px;
        margin:0 20px;
    }
}

このメディア クエリの例では、ウィンドウの幅が.wrapper200 ピクセル以下の場合、160 ピクセルの絶対幅と両側に 20 ピクセルのマージンが与えられます。

MDN では、メディア クエリについて詳しく説明しています。

...この特定のケースでは、メディアクエリを使用しないようにという命令があります。

その場合、body要素にパディングを追加するだけです。

body {
    padding:0 20px;
}

JSFiddle デモ。