Unknown whitespace appearing inside <div> without padding or margins
I'm having an odd issue with whitespace in a design I'm building.
I created a <div> to contain voting elements - it holds an upvote button, downvote button, and vote total, each inside their own <div> element, and using <img> for the buttons.
Source:
<div class="votebox">
<div class="vote"><img src="upvot开发者_开发问答e.png" /></div>
<div class="votetotal">15</div>
<div class="vote"><img src="downvote.png" /></div>
</div>
In the mini-reset in my CSS, both <div> and <img> elements are defined to display without margins or padding, and FireBug confirms these specific elements have no margins or padding, but I'm seeing whitespace being added between the bottoms of the <img> elements and the bottom of their respective containing ` elements.
I added the following CSS to display a border around each element:
.votebox * {
border: 1px #000 solid;
}
and this is how it displayed in Firefox 3.6 (yes, those are StackOverflow vote images.. I'm using them as placeholders for the moment):
<img>s), but I'm much more interested in learning why these elements are displaying in this manner (this is supposed to be a self-teaching project after all).
Can anyone shed some light on this for me?
Edit: Steve H has pointed out to me that I should be using outline, rather than border, to show the outer edges of elements. I've made that change, and also separated the elements in CSS so they each display as a different colour.
The new outline looks like this:
<div>. This seems weird to me.Images in HTML are inline elements and are by default placed on the font base line, so what you are seeing is probably the space for the descenders. The usual way around this is either setting them to display: block or vertical-align: bottom.
EDIT: BTW, you can format images with CSS just like any other element, so you can mostly likely drop the extra divs around the images.
Your using a strict doctype, so
.votebox img{display:block;}
Should do the trick
Depends on the doctype you use. If you use Transitional ( <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ) it will be shown in the way you want.
example with transitional: http://jsbin.com/icesi
example with strict: http://jsbin.com/icesi/2
A related statement that may help you understand the issue is the following
Here's another example. You may have found that setting font-size: medium results in different font sizes in Explorer versus Navigator. This occurs because of the way the Internet Explorer for Windows team interpreted the intent of the CSS specification. In order to stay consistent with the Windows version, Internet Explorer for the Macintosh emulated its behavior in the 4.x series. If you put IE5/Mac into bugwards compatibility mode, it will continue to treat font-size: medium as IE4.x/Win does. In strict mode however, it will act as Navigator does, which is actually the correct interpretation according to the W3C.
Source: http://oreilly.com/pub/a/javascript/synd/2001/08/28/doctype.html?page=2
加载中,请稍侯......
精彩评论