XHTML 1.0中的图像下方不需要的间距严格 [英] Unwanted spacing below images in XHTML 1.0 Strict

问题描述

我的目标是使用XHTML 1.0严格的DOCTYPE为我的工作，但我遇到一些奇怪的设计问题。

我具有以下代码：

 < div>< img src =photos / someimage.jpgalt =Title />< / div> 
 

当我加载DOCTYPE设置为1.0 Strict的页面时，图像，在div。我删除了代码中的所有空格/换行符，这似乎是这种问题的通常罪魁祸首。如果我将DOCTYPE更改为1.0 Transitional的间距已经去了，页面看起来应该。 >



任何人都知道在仍使用1.0 Strict时避免此问题的方法吗？

感谢您的时间！

解决方案

http://www.schoonzie.com/rogue-padding-below-images

如果显示图片内线，它在它下面留下一个微小的空间。这是因为图像放在文本的基线上，并且在基线下面，应该为下降字符（如g，j或q）留出一些空格。

分支是在严格模式下，不可能使容器紧贴在图像周围，除非，当然，你明确说明img {display：block}。

https://developer.mozilla.org/en/图片，_tables，_and_mysterious_gaps

另一个主要选择是保留图片内嵌并更改图片的垂直对齐到行框。例如，您可以尝试以下操作：

  div img {vertical-align：bottom;} 
  

My goal is to use the XHTML 1.0 Strict DOCTYPE for this page I'm working on, but I'm running into some weird design issues..

I have the below code:

<div><img src="photos/someimage.jpg" alt="Title" /></div>

When I load the page with DOCTYPE set to 1.0 Strict, a little gap of spacing is added below the image, within the div. I've removed all whitespace/line breaks in the code, which seems to be the usual culprit for this sort of issue.. If I change the DOCTYPE to 1.0 Transitional the spacing is gone and the page looks as it should.

Anyone know of a way to avoid this issue while still using 1.0 Strict?

Thanks for your time!

解决方案

http://www.schoonzie.com/rogue-padding-below-images

If an image is displayed inline, it leaves a slight space below it. This is because the image is placed on the baseline of the text, and below the baseline there should be some more space for the descender characters like g, j or q.

The offshoot is that in strict mode it's not possible to make a container fit tightly around the image, unless, of course, you explicitly say img {display: block}.

https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

The other main choice is leave the image inline and alter the vertical alignment of the image with respect to the line box. For example, you could try the following:

div img {vertical-align: bottom;}

这篇关于XHTML 1.0中的图像下方不需要的间距严格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！