Help with page styling
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.
加载中,请稍侯......
精彩评论