テキストが2行になると余白が狭くなる

Pタグを使ってリストを作成しています。
スマホ表示にすると、テキストが2行のところと1行のところで余白感が狭くなったり綺麗におさまらないです。
margin-topを設定しても相殺されるのか直らないです。
この場合の対処法を教えていただけないでしょうか。
よろしくお願いいたします。

sass
1.trouble
2	&__list
3		font-weight: 900
4		font-size: 1rem
5		transform: translateY(50%)
6		+sm_only
7			margin-bottom: 10px
8			position: relative
9			margin-left: 20px
10		&:before
11			content: '\f00c'
12			font-family: 'Fontawesome'
13			color: #efefef
14			margin-right: .5rem
15			+sm_only
16				position: absolute
17				top: 0
18				left: -20px
19

pug
1
2p.trouble__list テキストテキストテキストテキストテキストテキスト
3p.trouble__list テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
4p.trouble__list テキストテキストテキストテキスト

行動規範の内容に同意します

回答1件

ベストアンサー

なぜ transform が必要なのかわかりませんが、50%ととすると複数行になればそれだけ下がってしまうので、固定値を指定したらいいのではないでしょうか

CSS
1    /*transform: translateY(50%);*/
2    transform: translateY(0.5rem);

投稿2019/09/05 02:43

x_x

総合スコア13749

takamiii_158cm

2019/09/05 02:56

できました！ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

テキストが2行になると余白が狭くなる

関連した質問