ページにマージンを追加する（絶対的/固定的に配置された要素も含む）

Question

絶対配置位置と固定配置要素を含むページにグローバルマージンを設定する方法はありますか？

Answer 1

これが可能なのであるあなたがそれらに設定された変換を持つ要素を持つこれらの絶対/固定要素をラップです。

スペックを見てみましょう：The Transform Rendering Modelプロパティ は、それが適用 であることを要素に新しいローカル座標系を確立し「変換」の「なし」以外の値を指定する

。

body { 
 
    margin: 100px; 
 
    color: white; 
 
    transform: translateX(0); 
 
    border-top: 2px solid green; 
 
} 
 
.absolute, .fixed { 
 
    width: 100px; 
 
    height: 100px; 
 
    top: 0; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    background-color: red; 
 
    left: 0; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    background-color: blue; 
 
    right: 0; 
 
}

<div class="absolute">absolute</div> 
 
<div class="fixed">fixed</div>

マージンと本体に対して位置決めされる絶対および固定要素の両方、上記のスニペットで、ことに注意してください。

注：

1）それはおそらく長期的に混乱を引き起こすだろうと私は必ずしもそれをこのように使用することはお勧めしません。

2）@Temani Afifは固定要素は絶対的な要素のように振る舞いますので、このテクニックはコンテキストによっては期待どおりに機能しない可能性があります。

Answer 2

ワイルドカードセレクタですべての要素に余白を追加できますが、内部要素に対してこれをキャンセルするのに多くの時間を費やします。 body> *のようなものを試して、最上位の要素にマージンを追加することができます。

body > * { 
 
    margin: 50px; 
 
} 
 

 
#abs { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#abs .inner { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: blue; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
#fixed { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: green; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="fixed"></div> 
 
<div id="abs"> 
 
    <div class="inner"></div> 
 
<div>