Help with page styling

Question

Help with page styling

97 Views Asked by Jagd At 20 October 2024 at 03:40

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

<body>
    <form id="form1" runat="server" >
    <div>
        <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?

Original Q&A

There are 3 best solutions below

Ben On 03 December 2009 at 20:55

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/

prodigitalson On 03 December 2009 at 20:56

<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.

**mwcz** · Accepted Answer

mwcz On 03 December 2009 at 20:58 BEST ANSWER

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 }

Help with page styling

There are 3 best solutions below

Related Questions in CSS

Related Questions in PAGE-LAYOUT

Trending Questions

Popular # Hahtags

Popular Questions