0

次の画像をページの上部に配置しています。

<body>
    <form id="form1" runat="server" >
    <div>
        <div>
            <img src="Images/top.png" width="100%" height="115px" alt="top.png" />
        </div>
    </div>
    </form>
</body>

問題は、画像の左、上、右、下に少しパディングが表示されていることです。そこにそのパディングは必要ありません。つまり、画像の上部がページの左右と同じ高さになり、ページの幅全体に広がるようにします。どうすればスタイルでこれを達成できますか？

4

3 に答える 3

4

CSSリセットルールを使用してブラウザスタイルをリセットし、そこからビルドする必要があります。http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/を使用しています

于 2009-12-03T20:55:59.170 に答える
1

一部のブラウザのデフォルトスタイルでは、body要素にパディングが付けられ、一部のブラウザでは余白が付けられます。すべてのブラウザで画像をビューポートと同じ高さにするには、両方を削除する必要があります。

    body { margin: 0; border: 0 }
于 2009-12-03T20:58:57.963 に答える
0 
<img style="display: block; padding: 0; margin: 0;" ... />

ただし、その画像が本質的に何らかの装飾である（つまり、「コンテンツ」ではない、または別のページにリンクされていない）場合は、親要素の背景画像として使用することを好みます。

例えば

＃pseudo-image {高さ：100px; 幅：200px; 背景：transparent url（path / to / image）scroll no-repeat top left;}

もちろん、この方法で画像を表示するのは実際のサイズに制限されており、divを同じサイズ以上に設定する必要があります。

于 2009-12-03T20:56:50.683 に答える