0

私の Web サイトでは、ページの右側に空白がありますが、ページの色を含め、ページのすべての幅が 100% に設定されています。したがって、ページからはみ出した幅があっても、この部分は他の部分と同じ色にする必要があります。

私はアンカー ベースの Web サイトを使用しています。http://www.jeremyspence.net78.net/を見ると、最初のアンカーにのみ横に空白があり、横に余分なスペースがあることがわかります。ずっと（明らかに）。空白も余分なスペースも必要ありませんが、空白は困惑しています。そして、はい、私は持っていmargin: 0;ますpadding: 0;

4

4 に答える 4

3

ボックスモデルを理解する

あなたのサイトでは、 クラスwebsitecontainerとすべてに次のスタイル ルールがありますpackagecontainer。mecontainer

...
width:100%;
padding:50px;
...

これは文字通り、コンテナー (この場合は本文) の全幅にまたがる必要があり、ブラウザーはその幅の周りに 50px のパディングを追加する必要があることを意味します。これは、最新のブラウザで使用されているW3C 標準のボックス モデルに従っているべき方法です。古いバージョンの IE では、box-model はページで現在設定されている方法で機能し、パディングは幅から差し引かれていました。

違いを理解するには、次の図を参照してください。

W3C ボックスモデル

ソリューション

簡単な解決策は、これらのコンテナからパディングを取り除き、余分な幅と余分なスペースをなくすことです。そのパディングが必要な場合は、現在のコンテナの内容を別のコンテナ内にラップし、この新しい内側のコンテナにパディングを適用するだけです。例えば：

 <div class="some-container">
     <div class="inner-container">
          <!--Content goes here as before-->
     </div>
 </div>

スタイル ルールは次のようになります。

 .some-container {width:100%;}
 .inner-container {padding:50px;}
于 2013-01-27T21:27:56.637 に答える
0

ここにあなたのCSS：

.homecontainer {
    background:#ffe6ce;
    width: 100%;
    height: 1080px;
    padding-top:50px;
}

多分そうあるべきです：

.homecontainer {
    background:#ffe6ce;
    width: 100%;
    height: 1080px;
    padding: 50px 0 0 0;
    margin: 0;
}

基本的に上から時計回りに実行される短縮形式になるように、 の追加marginと再加工に注意してくださいpadding: 50px (上) 0 (右) 0 (下) 0 (左)

于 2013-01-27T21:30:30.507 に答える
0

これらのスタイルの現在の CSS コードをこれに置き換えます

.websitescontainer {
    width: 100%;
    height: 1080px;
    background: #cefece;
}
.packagescontainer {
    width: 100%;
    height: 1080px;
    background: #cefefe;
}
.mecontainer {
    width: 100%;
    height: 1080px;
    background: #fecefe;
}

注：この方法でこのコードを作成できます

.websitescontainer, .packagescontainer, .mecontainer{
    width: 100%;
    height: 1080px;
    background: #cefece;
}
.mecontainer {
    background: #fecefe;
}
于 2013-01-27T21:24:56.433 に答える
-1

外すらしい

padding: 50px;

から.mecontainer解決します。

于 2013-01-27T21:33:12.537 に答える