幅 100% の Div を作成し、マージンを維持するにはどうすればよいですか?

幅とマージンが 100% の Div を表示する

マージンを維持しながら幅 100% の div を作成するのは難しい場合があります。ただし、これを実現するにはいくつかのアプローチがあります:

float および calc() CSS 関数:

float プロパティは div を水平に配置できます。他の要素の流れに影響を与えることなく。 calc() 関数を使用して、マージンを含む div の希望の幅を計算できます。

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

padding および box-sizing: border-box

パディングとボックス サイズ変更を使用して、希望するものを作成することもできます。効果:

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

box-sizing を border-box に設定すると、パディングが幅の計算に含まれます。これにより、マージンがパッド領域の外側に確実に適用されます。

以上が幅 100% の Div を作成し、マージンを維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。