回答編集履歴
1
説明を追加
test
CHANGED
|
@@ -13,3 +13,14 @@
|
|
|
13
13
|
|
|
14
14
|
[float は使うな | 初心者向けCSSべからず集・すべし集 - Qiita](https://qiita.com/lhankor_mhy/items/bdcede71b1aad3b7ee94#float-%E3%81%AF%E4%BD%BF%E3%81%86%E3%81%AA)
|
|
15
15
|
[inline-block は使うな | 初心者向けCSSべからず集・すべし集 - Qiita](https://qiita.com/lhankor_mhy/items/bdcede71b1aad3b7ee94#inline-block-%E3%81%AF%E4%BD%BF%E3%81%86%E3%81%AA)
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
> また後学のために、レイアウトが崩れてしまう理由も教えていただけると幸いです。
|
|
20
|
+
|
|
21
|
+
inline-block はブロックレベル要素を大きな文字のように扱うものです。文字として扱うので、xという文字とyという文字を並べると、xyとなるように横並びになります。
|
|
22
|
+
ところで、xyは文字の一番下がズレていると思いませんか？ これはベースライン揃えという揃え方になっているからです。以下のページがわかりやすいと思います。
|
|
23
|
+
[CSSのテキストのベースライン（baseline）とは？ | Qumeruマガジン](https://qumeru.com/magazine/373)
|
|
24
|
+
|
|
25
|
+
そういうわけで、縦に並んだリストを横に並べると、その親の inline-block のベースラインが変わるので、位置がズレる、ということです。
|
|
26
|
+
|