•  12-09-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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 }

OTHER TIPS

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/

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top