css - メインエリアにパディングライトを設定できません

Question

ここでブラウザでズームインすると、左余白だけがあり、右余白には何もないことがわかります (したがって、div は画面の端に「接触」しています)。これを修正できないようです。padding-right:2em を #page .. の両方の body に適用してみましたが、うまくいきませんでした。

解決策はありますか..？

Answer 1

ページのコンテンツを保持する追加のコンテナ ブロックを追加する必要がある場合があります。次のようなことを試すことができます：

<div id="layout">
    <div id="page">
        <!-- Your page content here -->
    </div>
</div>

新しい構造が構築された後、結果の #layout div には body 要素のパディングといくつかの #page スタイルが含まれている必要があります。

#layout {
    min-width: 1000px;
    margin: 0 auto;
    padding: 2em;
}

現在の HTML 構造を変更したくない場合は、'#page' div に灰色の境界線を追加するという '汚い' トリックも試すことができます。

#page { 
    border: 2em solid #e2e2e2; 
}

ただし、望ましくない副作用がある可能性があるため、このようなものを使用する場合は注意してください.

最後に、メインの CSS ファイルを残りのスタイル シートの後に移動することをお勧めします。そうしないと、スタイルの一部が後続のファイルによって上書きされることになります。