Help with page styling_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-13 16:30 出处：网络

I have the following image being placed at the top of a page. <body> <form id=\"form1\" runat=\"server\" >

I have the following image being placed at the top of a page.

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

The problem is there is a bit of padding that is appearing to the left, top, right, and bottom of the image. I don't want that padding there. In other words, I want the image top be flush with the left and top of the page, and for it to stretch across the width of the page. How can I achieve this with a style?

You need to use CSS reset rules to reset browser styles, then build from there. I use http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Some browsers' default styles give the body element a padding, and some give it a margin. You'll need to remove both in order for the image to be flush against the viewport in all browsers.

    body { margin: 0; border: 0 }

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

However if its an image that is essentially a decoratin of somesort (ie. not "content" or linked to another page) i prefer to use it as a background image in the parent element.

For example

#pseudo-image {height: 100px; width: 200px; background: transparent url(path/to/image) scroll no-repeat top left;}

Of course doing it this way you are limited to displaying the image at its actual size and you have to set the div to those same dimensions or larger.