凍結
0 Anonymous Chrome
> <h1>見出し</h1>
> <p>テキスト</p>

上のようにHTMLを記入したとき、見出しと<p>~</p>の間に一行ほどの余白ができました。
この余白を狭めることは可能でしょうか?
03/16 15:32
返信
コメント投稿 検索
2 Anonymous Chrome
>>1 しち様
詳しく回答していただきありがとうございます。解決いたしました。
自動改行は考えもしなかったです・・・。
すぐに確認したところ、自動改行にするにチェックマークを入れていたため、余白ができていたようです。
お時間をいただきありがとうございました。
03/30 15:42
返信
1 しち SOG03
>>0
可能です。
要素と要素の間の余白(margin)幅を調整するには、スタイルシートを用います。

ただ一応念のため確認なんですが、
#〔□自動改行する〕にチェックが入っていませんか?

>🔲入っていない
問題ないです。未チェックのままにして、スタイルシートでの余白調整に取りかかります。
(この状態なら、余白調整にはスタイルシートを用います)

>☑️入っている
自動改行機能により『改行タグ(<br>)』が意図せず挿入されている可能性があります。
この場合は、2種類の対処どちらかで解決するかもしれません。

*🅰️━━━━━━━━━
 <h1>見出し</h1><p>本文</p>
*━━━━━━━━━━
などと、「見出し要素と本文段落要素の間に改行を入れない」形に書き直す。

*🅱️または、自動改行のチェックを外す。
※ただし今まで挿入されていた改行タグすべてが消えるため、レイアウトが大きく変わるおそれがあります。

もし上記の🅰️ or 🅱️を行って不要な余白が消えたなら、スタイルシートをいじる必要はありません。



###スタイルシートで余白(margin)を調整する※すでにスタイルシートで何かしらデザインしているなら、以下のスタイル指定はなるべく“ 既存の記述よりも下に書き足し ”てください。
━━━━━━━━━━

h1,h2,h3,h4,h5,h6{margin-bottom:0;}
p{margin-top:0;}

━━━━━━━━━━

>1️⃣ h1,h2,h3,h4,h5,h6{margin-bottom:0;}
これで見出し要素の『下部の余白(margin-bottom)』をゼロにします。

>2️⃣ p{margin-top:0;}
本文段落(p)要素の『上部の余白(margin-top)』をゼロにします。

両要素ともデフォルトだと上下左右に余白が設定されているので、それをいじれば不要な余白は消えるかと。
03/30 13:27
返信