凍結
0 Anonymous SO-54C
お借りしているテンプレートに文章の字下げをしたくて

p{
text-indent: 1em;
}

を追加したのですが、いざプレビューで見てみると字下げと一緒に改行もしてしまって文章と文章の間に一行分の空白ができてしまいます。

▽理想の文章(○が空白とします)
あいうえお
○かきくけこ
さしすせそ

▽実際の文章
あいうえお

○かきくけこ
さしすせそ

ネットで調べたものをhtmlにただ貼り付けて、文章を打つページで<p>を入れて入力しているだけなので何がいけなかったのかわかりません。
説明も下手ですみません…わかる方がいましたら教えていただけると助かります。
01/02 01:39
返信
コメント投稿 検索
1 しち SOG03
>>0
原因は『自動改行のせい』か『スタイルシートの余白(marginまたはpadding)設定のせい』のどちらかかと思われます。
順にご確認ください。

まずは
#〔□自動改行する〕にチェックが入っていませんか?

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

>☑️入っている
自動改行機能により『改行タグ(<br>)』が意図せず挿入されている可能性があります。
その意図せず入った<br>部分が、空白行として表示されている状態……ということです。

この場合は、以下2種類の対処どちらかで解決するかもしれません。

*🅰️━━━━━━━━━
 <h1>あいうえお</h1><p>かきくけこ</p><p>さしすせそ</p>
*━━━━━━━━━━
などと、「<p>〜</p>要素の前後に改行を入れない」形に書き直す。

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

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


自動改行していない・上記🅰️🅱️では解決しなかったら以下↓

# スタイルシートで余白(margin・padding)を調整する
とりあえず>>0で書かれていた『p{……;}』のところを以下に書き換えてみてください。
━━━━━━━━━━

p{
text-indent: 1em;
margin: 0;
padding: 0;
}

━━━━━━━━━━
こう書くと、<p>〜</p>要素の上下左右の余白がゼロになります。

※テンプレのスタイルシートがどう書かれているか分からないので、書き換えても変化が起きなかったり、テンプレのデザインが崩れるおそれがあります。


書き換えても問題が解決しなかったら、
『なんの機能(トップページ・子ページ・小説機能・ノート機能 etc.)』で起きている問題か書き添えて、
再度現状を書き込んでください。
(機能によって独特の仕様が存在する場合があるのと、
 なんの機能か分かると、「【どこ】をどう書き換えて〜」といった説明がしやすいので……)
01/02 22:39
返信