可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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="upvote.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):

Now, the obvious answer to this problem is to simply set the "vote" class to have an explicit height of the images (and I will do this, possibly even opting for CSS sprites over <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:

As you can see, the issue is a bit different than I thought. It looks like there is some whitespace below the image, but this is compounded by the fact that the bottom image seems to be rendered slightly outside its containing <div>. This seems weird to me.

回答1:

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.

回答2:

Your using a strict doctype, so

.votebox img{display:block;}

Should do the trick

回答3:

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