こんにちは私は5pxマージンで合計ウィンドウサイズを適用するDIVを作成しようとしていますが、マージンプロパティに問題があります。DIVを5 pxマージンでウィンドウ全体の高さと幅を占めるようにするには
上記.outer
{
background-color:white;
margin-left:-5px;
margin-right:-5px;
margin-top:-5px;
margin-bottom:-5px;
height:400px;
width:100%
}
私のCSSコード..です私を助けてください..
このDIV 5ピクセルのマージンをスクリーン/ウィンドウサイズの合計高さと幅を占有する必要があります。
まず、CSS要素htmlとbodyを100％の高さと幅に設定する必要があります。それらはページ全体をラップするので、ページ内のコンテンツには画面全体を含めることはできません。
次に、パーセントで作業するときはmarginを使用するのは良い考えではありません。画面に等しいサイズのdiv要素に適合し、の場合、には5ピクセルの余白があり、合計幅は100％+ 5ピクセルになります。それは画面そのものよりも大きくなります。代わりにpaddingを使用してみませんか？余白の幅を指定でき、
html, body, .outer { height: 100%; margin: 0; width: 100%; }
.outer {
padding: 5px;
}
htmlのスタイルを設定する必要はありません。 cssでは "height：100％"を設定しても意味がありません。幅も設定する必要はありません。パディングは余白と同じではありません。たとえば、異なる背景色を使用する場合などです。 – PauliL
Touché！実際に背景色を変えたい場合（または別の理由で要素を分けたい場合）は、おそらくbody要素にパディングを使用することをお勧めします。私が前に述べたように、絶対数と相対数を組み合わせても必ずしも合算するわけではありません。 –
は設定しないでください幅：私の提案は、このようにこのようなものになるだろう（W3's page on the box modelを参照してください）。
身体のマージンを0に設定し、次に-5％を5％に変更する必要があります。
さらに、divにゼロ以外の埋め込みを設定する必要があります。何らかの理由で、パディングを設定しないと、上に余白が追加されます。
これを試してみてください：
body {
margin: 0;
}
.outer
{
margin: 5px;
padding: 1px;
height:400px;
}
あなたの問題はいえ何ですか？ –
「5px」ではなく「-5px」を使用している理由はわかりません –
これはIE8とChromeの左余白に右余白を与えていません。ありがとうございます。 – Exception