ログイン

問題36 文字の縦間隔を空けてみよう

HTML_CSSの問題

HTML_CSS

ひとつ前の問題では文字の横間隔を空ける方法を学びました。 今回の問題では文字の縦間隔(行)を空ける方法を実践していきます。

文字の縦間隔を空けてみよう

問題

文字の縦間隔を空けてみましょう!
見本画像を参考にしてCSSに記述し実装してください。

自分の環境に書くコード

              <p>
    この文字の縦の間隔を空けてみましょう!<br>
    この文字の縦の間隔を空けてみましょう!<br>
    この文字の縦の間隔を空けてみましょう!<br>
</p>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <p>
  この文字の縦の間隔を空けてみましょう!<br>
  この文字の縦の間隔を空けてみましょう!<br>
  この文字の縦の間隔を空けてみましょう!<br>
</p>
¥HTML¥
            
              p {
  line-height: 40px;
}
¥CSS¥
            
答えのアイコン

解説

文字の縦間隔を開けるときは、line-heightを使用します。

UIを構築する際、よく使用しますので覚えまておきましょう!
ログインして解答を見る
今回登場したプロパティで設定した数値は、文字の高さ + 上下の余白となります。
なので文字の上下の余白は設定した数値からフォントサイズを引いた数値が均等に配置されます。
例えば、文字サイズが16pxの場合、line-heightを20pxで設定すると20px - 16pxで4pxとなり、上下に2pxずつの余白が配置されます。
値の設定方法はいくつかあるので、さらに細かく数値を設定ておきたい場合は一度設定方法について詳しく調べてみましょう。
また、ボタンの真ん中に文字を配置したい場合にも役立ちます。
プロパティの値をボタンの高さと同じ高さに指定することで、文字を要素の中心に表示させることができます。
文字を真ん中に寄せる方法はいくつかありますが、一番素早く設定することができます。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!