Question

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

一个。如何测量仅包含一条线的盒子的线高以及它如何与要生成的框高度（以及任何字体属性）相结合视觉效果？

B中。如图1所示，图片的最顶部有一些黄色空间，（放大查看）图片2和3中缺少哪个？这是哪里的空间来自，因为我似乎没有在任何地方指定它。怎么会图片1触摸盒子的顶部，而图片2和3没有？

℃。为什么箱子2的高度与箱子5的高度（和箱子的高度）不同方框3与方框6）的高度不同。毕竟，行高是相同的两种情况，除了为嵌套图像指定vertical-align之外，没有别的不同。那么如何指定vertical-align或不更改外箱的高度？

<!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>

Six CSS rules and Six Corresponding Layouts

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

请注意。当所有内联只有一个'line-height'值时块容器盒中的盒子，它们都是相同的字体（和没有替换元素，内联块元素等）,. 以上将确保连续线的基线完全正确 “线高”分开。这在文本列中很重要必须对齐不同的字体，例如在表格中。

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

电子。如果我在线上有一个图像，那就是正确的（字体）基线将与图像内容框的下边缘对齐，即底部图像周围的框模型生成的框中显示的图像？或者是否也可以实现其他效果，如果是这样的话？

感谢。

Answer 1

我决定回答这个问题，以便结束讨论鉴于此帖的详细信息的答案可以在上面的评论中找到。

问候。

请帮助理解行高和垂直对齐CSS 2.1属性

1 个答案: