回答編集履歴
1
コメントを受けて追記
answer
CHANGED
|
@@ -18,4 +18,43 @@
|
|
|
18
18
|
|
|
19
19
|
[サンプル](https://jsfiddle.net/Lhankor_Mhy/tg32ckLx/)
|
|
20
20
|
|
|
21
|
-
個人的にはこれはバッドノウハウだと思いますが、どのような影響があるのか理解して採用するならば、それはそれでいいと思います。
|
|
21
|
+
個人的にはこれはバッドノウハウだと思いますが、どのような影響があるのか理解して採用するならば、それはそれでいいと思います。
|
|
22
|
+
|
|
23
|
+
# コメントを受けて追記
|
|
24
|
+
|
|
25
|
+
>__これは、aタグには元々の高さが設定されていないため
|
|
26
|
+
１ｐｘの高さを付けてｈ１要素と高さを揃えているのでしょうか？__
|
|
27
|
+
|
|
28
|
+
説明が難しいです。
|
|
29
|
+
私見ですが、これについては無理に理解しようとせず、とりあえず以下だけを覚えておくことをお勧めします。
|
|
30
|
+
|
|
31
|
+
「**インライン要素は地雷**なので、とにかく使用を避ける」
|
|
32
|
+
|
|
33
|
+
ですので、個人的には`line-height: 1px`はバッドノウハウで、`display: block`を用いるべきだと思っています。
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
どうしても理解したいのであれば、以下をお読みください。
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
画像は特に何も指定しなければ、文字のようなものとして扱われます。
|
|
42
|
+
画像1枚がとても大きな文字1文字、と理解していただければ、それほど外さないと思います。
|
|
43
|
+
|
|
44
|
+
ところで、アルファベットには下にはみ出す文字があることをご存じかと思います。このはみ出している部分をディセンダーと呼び、ディセンダーを分けるラインをベースラインと呼びます。
|
|
45
|
+
[ディセンダー - Wikipedia](https://ja.wikipedia.org/?curid=3062885)
|
|
46
|
+
|
|
47
|
+
文字領域にはこのディセンダーが含まれており、たいていの日本語の文字にはディセンダー領域にグリフが存在しないため、たいていの文字は下に余白があります。
|
|
48
|
+
|
|
49
|
+
ところで、さきほど「画像は文字のようなもの」と書きましたが、画像にもベースラインがあるのだろうか？という疑問が出てきますよね。
|
|
50
|
+
これは、画像のマージン領域下端と決められています。マージンがない場合は、画像の下端です。
|
|
51
|
+
|
|
52
|
+
さて、`vertical-align`というプロパティはご存じでしょうか？
|
|
53
|
+
これはインラインの垂直そろえをするものなのですが、何も指定しなければ`vertical-align: baseline`となります。
|
|
54
|
+
これは、行の中の文字はベースラインでそろえる、というものです。
|
|
55
|
+
|
|
56
|
+
これで、下に隙間ができる理由が分かったかと思います。
|
|
57
|
+
画像のベースラインはマージンがなければ画像の下端ですが、行のベースラインはディセンダー部分の余白の上にあり、そこに揃えられることになるのです。つまり、画像はディセンダー部分の余白の上に置かれます。
|
|
58
|
+
|
|
59
|
+
さて、`line-height: 1px`の効果について、これでお分かりかと思います。
|
|
60
|
+
つまり、行の高さをつぶすことによって強制的にディセンダー部分の余白もつぶしているのです。
|