teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

参考を追記

2020/09/18 03:12

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37460

answer CHANGED
@@ -10,6 +10,8 @@
10
10
  }
11
11
  ```
12
12
 
13
+ [vertical-align - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align)
14
+
13
15
  ---
14
16
 
15
17
  参考:

2

サンプルを追記

2020/09/18 03:12

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37460

answer CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  こちらはいかがでしょうか。
4
4
 
5
+ [サンプル](https://jsfiddle.net/Lhankor_Mhy/cz1t2um4/)
6
+
5
7
  ```css
6
8
  .button_class button {
7
9
  vertical-align: top;

1

参考を追記

2020/09/18 03:10

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37460

answer CHANGED
@@ -6,4 +6,13 @@
6
6
  .button_class button {
7
7
  vertical-align: top;
8
8
  }
9
- ```
9
+ ```
10
+
11
+ ---
12
+
13
+ 参考:
14
+
15
+ > The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
16
+ [Visual formatting model details](https://www.w3.org/TR/CSS2/visudet.html#line-height)
17
+
18
+ (勝手訳)inline-blockのベースラインは、通常のフローでは最後の行ボックスのベースラインになります。行ボックスがないか、'overflow' が 'visible' 以外の場合、マージンボックス下辺になります。