回答編集履歴
2
追記
answer
CHANGED
|
@@ -20,4 +20,7 @@
|
|
|
20
20
|
これを解消するには、文字を合わせるのをベースラインから上にすればよいです。
|
|
21
21
|
該当のコードでも上に設定しています。
|
|
22
22
|
|
|
23
|
-
[こちら](http://www.htmq.com/style/vertical-align.shtml)に分かりやすく記載されています。参考になれば幸いです。
|
|
23
|
+
[こちら](http://www.htmq.com/style/vertical-align.shtml)に分かりやすく記載されています。参考になれば幸いです。
|
|
24
|
+
|
|
25
|
+
簡単な図も作ってみました。
|
|
26
|
+
|
1
追記
answer
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
.box{
|
|
6
6
|
p,a{
|
|
7
7
|
display: inline-block;
|
|
8
|
-
vertical-align: top
|
|
8
|
+
vertical-align: top /*これを追加*/
|
|
9
9
|
}
|
|
10
10
|
p{
|
|
11
11
|
width: 500px;
|
|
@@ -15,7 +15,9 @@
|
|
|
15
15
|
|
|
16
16
|
原因はインライン要素のデフォルトがベースラインだからです。
|
|
17
17
|
|
|
18
|
-
「
|
|
18
|
+
「abcdefgxyz」などの時、一本の線が見えませんか？これがベースラインです。
|
|
19
|
+
つまりこの、下のラインに合わせているため、他の要素も下に行ってしまうのです。
|
|
20
|
+
これを解消するには、文字を合わせるのをベースラインから上にすればよいです。
|
|
19
|
-
該当のコードで上に設定しています。
|
|
21
|
+
該当のコードでも上に設定しています。
|
|
20
22
|
|
|
21
23
|
[こちら](http://www.htmq.com/style/vertical-align.shtml)に分かりやすく記載されています。参考になれば幸いです。
|