Unknown whitespace appearing inside <div> without

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.

标签： html css image rendering whitespace

3条回答

时光不老，我们不散

2楼-- · 2019-04-20 17:18

Your using a strict doctype, so

.votebox img{display:block;}

Should do the trick

0人赞添加讨论(0) 举报

走好不送

3楼-- · 2019-04-20 17:22

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.

0人赞添加讨论(0) 举报

我命由我不由天

4楼-- · 2019-04-20 17:31

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

0人赞添加讨论(0) 举报

Unknown whitespace appearing inside without

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

Unknown whitespace appearing inside
without