1

添付ファイルに表示されているビジュアル コンテンツに関していくつか質問があります (Firefox で CTRL-+ を使用すると、拡大されたビジュアル コンテンツとそれを生成したコードが左側に表示されます)。上から順に 1、2、3、4、5、6 の数字でリストされているビジュアル コンテンツに名前を付けましょう。たとえば、このシナリオについていくつか質問があります。

A. 1 行だけを含むボックスの行の高さはどのように測定され、ボックスの高さ (およびフォント プロパティ) とどのように組み合わされて視覚的な結果が生成されますか?

B. 写真 1 では、写真 2 と 3 では欠落している、写真の最上部に黄色のスペースがあるのはなぜですか (ズームインして確認してください)。そして、どこにも指定していないように見えるので、このスペースはどこから来たのでしょうか。写真 1 はボックスの上部に触れているのに、写真 2 と 3 は触れていないのはなぜですか?

C. ボックス 2 の高さがボックス 5 の高さと異なるのはなぜですか (また、ボックス 3 の高さはボックス 6 の高さと異なります)。結局、どちらの場合も line-height は同じであり、入れ子になった画像に対して 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>

6 つの CSS ルールと 6 つの対応するレイアウト

http://www.w3.org/TR/CSS2/visudet.htmlの CSS 2.1 仕様のセクション 10.8.1 には、次のように記載されています。

ノート。ブロック コンテナー ボックス内のすべてのインライン ボックスに 'line-height' の値が 1 つしかなく、それらがすべて同じフォントである場合 (および置換された要素、インライン ブロック要素などがない場合)、上記により確実になります。連続する行のベースラインが正確に「行の高さ」離れていること。これは、表など、異なるフォントのテキストの列を揃える必要がある場合に重要です。

D. 行の高さは、異なる行のフォント ベースライン間の高さであり、行間のスペースに寄与します。しかし、行が 1 つしかない場合、この行の高さは何をするのでしょうか? 一番上の行を考慮すると、行の高さがコンテナの一番上まで伸び、一番上に余分なスペースができるという仕様が書かれていないと思います。

E. 行に画像がある場合、(フォント) ベースラインは画像のコンテンツ ボックスの下端、つまり、画像の周りのボックスモデル？または、他の効果を達成することも可能ですか?

ありがとう。

4

1 に答える 1