1

我有一些与附件中可以看到的视觉内容有关的问题（在 Firefox 中使用 CTRL-+ 来查看放大的视觉内容以及在左侧生成它的代码）。让我们从上到下用数字 1、2、3、4、5 和 6 命名列出的视觉内容。我对这种情况有几个问题，例如：

A. 如何测量仅包含一行的框的行高，以及它如何与框高（以及任何字体属性）结合以产生视觉结果？

B. 为什么在图 1 的顶部有一些黄色的空间，（放大看）是图 2 和图 3 中没有的？这个空间是从哪里来的，因为我似乎没有在任何地方指定它。为什么图片 1 触及盒子顶部，而图片 2 和 3 却没有？

C. 为什么盒子 2 的高度与盒子 5 的高度不同（盒子 3 的高度与盒子 6 的高度不同）。毕竟，line-height 在这两种情况下都是相同的，除了为嵌套图像指定了垂直对齐之外，其他没有什么不同。那么如何指定垂直对齐或不改变外框的高度呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
  <p style="height: 200px; width: 200px; background: yellow; line-height: 200px;">
    <img src="images/jellyfish.jpg" width="100" height="100" /></span>
  </p>
  <p style="width: 200px; background: yellow; line-height: 100px;">
    <img src="images/jellyfish.jpg" width="100" height="100" />
  </p>
  <p style="width: 100px; background: yellow; line-height: 100px;">
    <img src="images/jellyfish.jpg" width="100" height="100" />
  </p>
  <hr />
  <p style="width: 200px; background: yellow; line-height: 399px;">
    <img style="vertical-align: middle;" src="images/jellyfish.jpg" width="100" height="100" />
  </p>
   <p style="width: 200px; background: yellow; line-height: 100px;">
    <img style="vertical-align: middle;" src="images/jellyfish.jpg" width="100" height="100" />
  </p>
  <p style="width: 100px; background: yellow; line-height: 100px;">
    <img style="vertical-align: middle;" src="images/jellyfish.jpg" width="100" height="100" />
  </p>
</body>
</html>

六种 CSS 规则和六种对应布局

http://www.w3.org/TR/CSS2/visudet.html第 10.8.1 节中的 CSS 2.1 规范说：

笔记。当一个块容器框内的所有行内框只有一个 'line-height' 值并且它们都是相同的字体（并且没有替换元素、行内块元素等）时，上述将确保连续行的基线完全分开“行高”。当不同字体的文本列必须对齐时，这一点很重要，例如在表格中。

D. 好的，所以 line-height 是不同行上字体基线之间的高度，从而有助于行之间的空间。但是如果只有一行，这个 line-height 有什么作用呢？我猜规范没有说的是，当考虑最上面的一行时，行高将延伸到容器的顶部，在顶部创造额外的空间。

E. 说如果我有一张图片就行了，（字体）基线会对齐到图片内容框的下边缘，即显示在生成的框中的图片底部，这样说对吗？图像周围的盒子模型？或者是否也有可能达到其他效果，如果可以，那又如何？

谢谢。

4

1 回答 1

0

我决定回答这个问题是为了结束讨论，因为可以在上面的评论中找到这篇文章的详细信息的答案。

问候。

于 2013-11-04T00:03:08.740 回答