ページのスタイリングのヘルプ

StackOverflow https://stackoverflow.com/questions/1842853

  •  12-09-2019
  •  | 
  •  

質問

私は、ページの最上部に配置されている次の画像を持っています。

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

問題は、画像の左、上、右、下に表示されているパディングビットがあります。私はそこにそのパディングを望んでいません。言い換えれば、私は画像のトップページの左と上と同じ高さ、そしてそれがページの幅を横切ってストレッチするためにしたいです。どのように私はスタイルでこれを達成することができますか？

役に立ちましたか？

解決

一部のブラウザのデフォルトのスタイルは、body要素にパディングを与え、そしていくつかはそれを余裕を与えます。あなたは画像がすべてのブラウザでビューポートに対して同じ高さにするためには、両方を削除する必要があります。

    body { margin: 0; border: 0 }

他のヒント

あなたはそこからビルドし、ブラウザのスタイルをリセットするためにCSSのリセットルールを使用する必要があります。私は http://meyerweb.com/eric/thoughts/2007使用します/ 05/01 /リセットリロード/ の

<img style="display: block; padding: 0; margin: 0;" ... />

ただしその場合は、基本的にsomesort（すなわちない「コンテンツ」または別のページにリンクされている）私は親要素内の背景画像として使用することを好むのdecoratinあるイメージます。

例

    ＃疑似画像{高さ：100pxに。幅：200pxの。背景：透明なURL（パス/ /画像）無反復左上スクロール;}      

もちろん、それにあなたが実際のサイズで画像を表示することに限定されているこの方法を行うと、あなたはそれらの同じ大きさ以上にdiv要素を設定する必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top