html - 幅 100% のフッターの問題 - HTML CSS

Question

大きな問題があります。ランディングページをデザインしていますが、フッター要素に問題があります!

幅を 100% に設定しましたが、ブラウザーでプレビューすると 100% ではなく、左、右、および下に数ピクセルの境界線が残りました。

これはフッターの CSS です。

footer {
width: 100%;
background: white;
height: 100px;
margin-top: 100px;

}

次のようなものを追加すると、何かが変わります: left: 0px; 下: 0px; または右：0px;

どのようにできるのか？

これは、問題をうまく説明できなかった場合のイメージです。

score 1 · Accepted Answer

親要素（おそらく<body>または任意<div>）には、固定幅またはマージンおよび/またはパディングがあるようです。

width:100%;親要素によって提供されるすべての利用可能なスペースを取ります。たとえば、親の幅が 700px の場合、フッターにもこれが含まれます。

score 1 · Accepted Answer

タグのpaddingとmarginの値をリセットしていないようです。bodyブラウザーはそこで標準的な CSS ルールのセットを使用します。これには多くの場合、パディングとマージンが含まれます。

これを CSS に追加します。

body { margin: 0; padding: 0; }

score 1 · Accepted Answer

フッター自体ではなく、ボディ要素のマージン/パディングのようです。body の CSS タグに以下を追加してみてください。

body
{
  margin:0;
  padding:0;
}

また、これらの 2 つのプロパティをフッター css タグに追加して、別の要素から何も継承しないようにします。

score 0 · Accepted Answer

これはマージ/パディングの問題に見えます。ボディのパディングとフッターのマージンをリセットして、100% の幅をカバーすることができます

body {
    margin: 0px;
    padding: 0px;
}

footer {
    margin: 0px;
}

4 に答える 4