Q&A
『上の画像の様に』とありますが、どうなってほしいのかわかりません。
理想形の画像でもあるとわかりやすいと思います。
上の画像の様に文章の途中でpadding-bottom（またはmargin-bottom）で余白を入れる方法は何かありますでしょうか？
試したこととしては、htmlで該当の箇所にspanタグを入れてpadding-bottomを指定しましたが効きませんでした。
また、こちらはレスポンシブのサイトになっており、スマホサイズのみこの様に文章の途中で余白の指定があります。
なのでスマホサイズのみ、余白を入れたいです。
何かわかる方おりましたら、ご教授お願いいたします。
現在のコードとプレビューです。
html
1 <p class="booking-sentence booking-sentence-1"> 2 豊かな暮らしの体験宿 <span class="break"></span>自然の中の貸切ロッジ。<span class="newline"></span> 3 <br> 4 海の音、鳥の声、木々に囲まれて<span class="break"></span>自然の中でゆったりと、<br> 5 屋久島の暮らしを体験できる宿です。 6 </p> 7 <p class="booking-sentence booking-sentence-2"> 8 豊かな暮らしのひと時を、お過ごしください。 9 </p> 10 <p class="booking-sentence booking-sentence-3"> 11 お待ちしております。 12 </p>
css
1.booking-text { 2 text-align: center; 3 position: relative; 4 top: 50%; 5 left: 50%; 6 transform: translate(-50%, -50%); 7 font-size: 1.7rem; 8 letter-spacing: 2px; 9 line-height: 3rem; 10} 11 12.booking-sentence { 13 color: #333; 14}
responsivecss
1 .booking-content { 2 display: none; 3 } 4 5 .break::before { 6 content: '\A'; 7 white-space: pre; 8 } 9 .newline { 10 padding-bottom: 2rem; 11 }
※次の二枚は、spanタグにpaddingを指定したときの状態です。
回答2件
0
ベストアンサー
display: block;やdisplay: inline-block;を追加してみると、やりたいことをができたりしませんか?
CSS
1.break::before { 2 display: block; /* 追加してみる */ 3} 4.newline { 5 display: inline-block; /* 追加してみる */ 6}
投稿2020/06/15 13:21
総合スコア4528
.newlineに対してdisplay: inline-block;を指定したところうまくいきました！
spanタグがインライン要素のため効かなかったのですね！
勉強になりました！ありがとうございます！
0
行間を広げたい文字を<apan>で囲み、
cssでline-heightを使用してみる方法はどうでしょうか。
投稿2020/06/14 14:57
総合スコア72
ありがとうございます！
「自然の中の貸切ロッジ。」をspanで囲み、line-heightを指定してみたところ、「自然の中の貸切ロッジ。」を中心に上下に余白が生じてしまいました。上下ではなく、下のみに余白をつける方法は何かありますでしょうか????？
「自然の中の貸し切り．．．」の下に余白が欲しいのなら、
シンプルにmargin-bottomを使用してはいかがでしょう。
それが、指定しても効かないのです????
どの様な状態になるのかの画像を追加しますので、ご覧いただけるとありがたいです。
画像はpaddingになっていますが、marginでも同じ状態になります。
あなたの回答
tips
プレビュー
