【HTML/CSS】aタグのwidthおよびheightについて

Question

下記のコードについて質問です。
以下は、①aタグ内にdivタグを配置した場合、②aタグ内にimgタグを配置した場合、です。

aタグはdisplay:inlineの要素であり、widthの初期値はautoでheightの初期値もautoであり、内容物によってwidthとheightが定義されると思っていたのですが、検証ツールで調べたところ、想定と異なっておりました。
参考サイト：
https://saruwakakun.com/html-css/basic/width-height

①aタグ内にdivタグを配置した場合

<a href="hogehoge"><div class="box1"></div></a>

.box1{
  width: 200px;
  height: 200px;
  background-color: slateblue;
}

＜結果＞
aタグのwidthはウィンドウのサイズでheightは200px（heightは想定通りでしたが、widthは200pxになると思っていました）。

②aタグ内にimgタグを配置した場合
※ここでの画像はwidthが270pxでheightが200pxです。

<a href="hogehoge"><img src="images/hoge-image.jpg" alt=""></a>

特に記載なし

＜結果＞
aタグのwidthは270pxでheightは文字サイズと同じ16px（widthは想定通りでしたが、heightは200pxになると思っていました）。

①と②について、どうしてこのような結果になったのか、ご教示いただけますと幸いです。
どうぞよろしくお願いいたします。

Comments

[Lhankor_Mhy]

「まだ回答を求めています」とのことですが、どのような不明点がありますか？

Answer 1

まず、結論から申し上げます。

「display: inlineは仕様がややこしすぎるので、安易に触るべからず」

---

さて、まず比較的簡単な②についてですが。

__aタグのwidthは270pxでheightは文字サイズと同じ16px（widthは想定通りでしたが、heightは200pxになると思っていました）。 __

これは以下の仕様によるものだと思います。

The content area of the inline box is sized and positioned to fit (possibly hypothetical) text from its first available font.

6.1. Inline Box Heights: the inline-sizing property | CSS Inline Layout Module Level 3

以上のように、通常ですとインラインボックスの高さは「最初の有効なフォント」に合わせられるようになっていることが原因です。（なお、このプロパティを実装しているブラウザはないと思います）

ただ、当方で試したところ、heightは文字サイズと同じではなく、フォントサイズの1.5倍でした。
この差は、おそらくフォントやOSの違いによるものだと思います。
（ためしに、font-family を変えてみてください。高さが変わるはずです）
先ほどの仕様には続きがあります。

This specification does not specify how. A UA may, e.g., use the the maximum ascender and descender of the font.

6.1. Inline Box Heights: the inline-sizing property | CSS Inline Layout Module Level 3

訳：この仕様はどのように実装するかを定めません。例えば、UAは最大アセンダーと最大ディセンダーを使用することができます。

フォントに詳しい方の間では有名な話なのですが、同じフォントでもOSによってアセンダーとディセンダーの値が異なります。
つまり、インラインボックスの高さについて、何かを期待するのはやめた方がいいです。

---

次に、ややこしい①についてですが。

aタグのwidthはウィンドウのサイズでheightは200px（heightは想定通りでしたが、widthは200pxになると思っていました）。

ご提示のコードに少し変更を加えたものを、サンプルとして提示します。
https://jsfiddle.net/Lhankor_Mhy/upvr0L7y/

これは、ボーダーとパディングを当てたものですが、ご覧の通りインラインボックスが途中で改行した時のようにちぎれています。

MDNによると、

flow
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
外部表示種別が inline または run-in であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。
display - CSS: カスケーディングスタイルシート | MDN

となってます。
ですので、a要素はインラインボックスを生成しますが、インラインボックスにはブロックレベル要素が入らないので、その場で改行が起きたように処理され、ブロックレベル要素がブロック整形コンテキストに従って配置され、フロートもされていないので回り込みも起きず、ブロックレベル要素の後にインラインボックスの続きが表示されているのだと思います。
ただ、そのブロックレベル要素自体はa要素の子要素なので、リンクの対象となっており、ブロック整形コンテキストで配置されたブロックレベル要素は水平方向全てを使ってしまうため、横幅一杯にリンクが広がっているのだと思います。

これは、a要素の親要素にdisplay: flexを適用して、ブロック整形コンテキストではなくフレックス整形コンテキスト下に置いてみると、違いがわかるかと思います。（サンプルの下部）
（この部分は誤っていたので削除します。）

つまり、インラインボックスの中にインラインレベル以外のものを入れるな、ということかと思います。

Comments

[teratail20]

Lhankor_Mhy様

ご回答いただきありがとうございます。
インラインボックスの高さについては規則性を見出そうとしない方が良い、ということですね…。

今回aタグで他要素を囲ったのは、ボタン（または画像）全体をリンク可能にしたかったためです。その後、調べたところ、むしろaタグをdivタグの中に入れてaタグをdisplay:block;として全体に広げるなどの方法を見つけました。

ご回答内容については、まだ自分の理解が追いつきませんが、不勉強部分を補いながら参考にさせていただきたく思います。

Answer 2

div はブロックレベル要素なので、下記のような性質を持ちます。

ブロックレベル要素 - HTML: HyperText Markup Language | MDN

ブロックレベル要素は親要素 (コンテナー) の水平空間全体と、内容物の高さに等しい垂直空間を占有し、「ブロック」を生成します。

widthで幅を制限しても、親要素の幅一杯の空間を占有するという性質は失われません。

対して、img はインライン要素なので、下記のような性質を持ちます。

インライン要素 - HTML: HyperText Markup Language | MDN

インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。

下記のように直後にインライン要素（例えばspan）を配置してみると違いがよく分かると思います。

<a href="hogehoge"><div class="box1"></div><span>aaaaa</span></a>
<hr>
<a href="hogehoge"><img src="https://placehold.jp/270x200.png" alt=""><span>aaaaa</span></a>

CodePenサンプル

---

Comments

[teratail20]

hatena19様

ご回答ありがとうございます。

ご用意いただいたCodePenサンプルを試したのですが、
私の理解が追いつかない状況です。

その後、aタグにdisplay:inline-blockを指定すると、
①の場合はaタグのwidthが200pxでheightが200pxとなりました。
②の場合はaタグのwidthが270pxでheightが200pxとなりました。

上記のことから、aタグの子要素のdisplayというより、
aタグ自身のdisplayが絡んでいるのかと考えているのですが‥。
ただ、それにしてもdisplay:inline-blockもwidthはautoでheightもautoですので（内容物によってwidthとheightが定義される）、aタグのdisplayをinlineからinline-blockに変えただけでどうしてこのような結果になったのか疑問ではあります‥。

[hatena19]

ます、インライン要素は（内容物によってwidthとheightが定義される）という理解が間違っています。
widthは内容物によって決まりますが、高さは内容物によって決まりません。
例えば、
<a href="#">aaaa<span>bbbbb</span></a>
a > span {font-size:30px;}
だとa要素全体の高さは、span要素の高さと同じにはなりません。

inline-blockはサイズに関してはブロック要素的な性質になりますので内容物によって高さが決まります。
a {display: inline-block} を追加すると確認できます。

[teratail20]

hatena19様

ご回答ありがとうございました。随分時間が経ってしまい申し訳ございません。
＞ます、インライン要素は（内容物によってwidthとheightが定義される）という理解が間違っています。
widthは内容物によって決まりますが、高さは内容物によって決まりません。
→例えばspanタグで長文を囲った場合、検証ツールではspanタグのheightが長文の行数分の値になっており、なかなか解釈が難しく感じております。