上の画像の様に文章の途中で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 }
回答2件
あなたの回答
tips
プレビュー