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

p{
text-indent: 1em;
}

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

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

▽実際の文章
あいうえお

○かきくけこ
さしすせそ

ネットで調べたものをhtmlにただ貼り付けて、文章を打つページで<p>を入れて入力しているだけなので何がいけなかったのかわかりません。
説明も下手ですみません…わかる方がいましたら教えていただけると助かります。
01/02 01:39
返信
コメント投稿 検索
2 Anonymous SO-54C
>>1
しち様
お返事ありがとうございます!
確かにどの機能を使用しているか記載してませんでした、失礼しました。
使用している機能は小説機能です。

自動改行を試しましたが解決できなかったので、margin·paddingを追加しました。すると上の空白はなくなったのですが、</p>で閉じると今度は下に空白ができてしまいました。
小説ページ編集にpタグを入れているのですが、</p>を入れずに<p>だけ入れてプレビューして見ると空白はありませんでした。
HTMLの入力する所等が間違っているのでしょうか…?

下記にお借りしたテンプレートのスタイルシートを載せました。HTMLに至ってはどこで区切って載せればいいかわからずすべて載せています。
(ダメだったらすみません…)

▽<p>かきくけこ でプレビュー
あいうえお
○かきくけこ
さしすせそ

▽<p>かきくけこ</p> でプレビュー
あいうえお
○かきくけこ

さしすせそ


・小説の基本設定にある本文の改行を<br>に変換「する」に設定中
・文章画面編集の自動改行は「しない」に設定中

▽文章画面編集
<main style="max-width:600px;"><article class="txt"><h3>#title_chapter#</h3>
#text#
<br>
</article></main>
<br>
#novel1#
<br>
<br>
#top#
<br>
<br>

▽HTML(
<link href="http://fonts.googleapis.com/css?family=Anonymous Pro" rel="stylesheet" type="text/css">
<style type="text/css">
@font-face{
font-family:"花園明朝";
src: url('画像のURL')
format("woff");
}
*{
margin:0;
padding:0;
font-size:13px;
font-family:"Anonymous Pro", "游明朝", "メイリオ";
}
body{
padding:0 20px;
background:#fff;
color:#555;
letter-spacing:1px;
text-align:center;
}
a{
color:#555;
text-decoration:none;
}
a:hover{
color:#eee;
}

h1, h2, h3{
font-family:"花園明朝", "serif";
font-weight:normal;
letter-spacing:2px;
text-align:center;
}
h1{
font-size:16px;
margin:20px 0 15px;
}
h2{
font-size:13px;
padding:45px 0 15px;
background:url("画像のURL") no-repeat 50% 0;
background-size:auto 60%;
}

h3{
font-size:14px;
width:180px;
margin:0 auto 30px;
padding:0 0 10px;
border-bottom:solid 1px #eee;
}

header{
padding:40px 0 60px;
}
header a{
padding:0 0 5px;
border-bottom:solid 1px #eee;
letter-spacing:2px;
}
main{
box-sizing:border-box;
margin:20px auto;
padding:10px;
background:linear-gradient(45deg, #89c997 25%, transparent 25%, transparent 50%, #89c997 50%, #89c997 75%, transparent 75%, transparent);
background-size:4px 4px;
}
article{
padding:20px 10px;
background:#fff;
line-height:220%;
}
.txt{
padding:40px 30px;
text-align:justify;
}
section{
display:inline-block;
max-width:300px;
box-sizing:border-box;
padding:20px;
word-wrap:break-word;
vertical-align:top;
text-align:justify;
}
section a{
color:#89c997;
}
.a{
margin:40px 0 0;
padding:30px 0 0;
border-top:solid 1px #eee;
}

↓ここに追加しました。
p{
text-indent: 1em;
margin: 0;
padding: 0;
}

br{letter-spacing:0;}

@media screen and (min-width:600px) {
*{
font-size:12px;
}
h2{
font-size:14px;
}
h3{
font-size:16px;
width:300px;
}
article{
padding:40px 30px;
}
.txt{
padding:60px 50px;
font-size:13px;
letter-spacing:2px;
}
}
</style>
01/03 17:40
返信