p {
text-indent: 1em;
}で文頭を一文字分下げることは出来ますがp{
padding-top: 1em ;
text-indent: -1em ;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>河童（芥川）</title>
<style type="text/css">
p {
text-indent: 1em;
margin: 0;
width: 30em;
}
.conversation {
color: #070;
}
p.conversation {
text-indent: -1em;
margin-left: 1em;
}
</style>
<p>
窓の外の往来にはまだ年の若い河童が一匹、両親らしい河童をはじめ、七八匹の雌雄の河童を頸のまわりへぶら下げながら、息も絶え絶えに歩いていました。しかし僕は年の若い河童の犠牲的精神に感心しましたから、かえってその健気さをほめ立てました。
</p>
<p class="conversation">
「ふん、君はこの国でも市民になる資格を持っている。……時に君は社会主義者かね？」
</p>
<p>
僕はもちろん <em class="conversation">qua</em>（これは河童の使う言葉では「然り」という意味を現わすのです。）と答えました。
</p>
<p class="conversation">
「では百人の凡人のために甘んじてひとりの天才を犠牲にすることも顧みないはずだ。」
</p>
<p class="conversation">
「では君は何主義者だ？ だれかトック君の信条は無政府主義だと言っていたが、……」
</p>
<p class="conversation">
「僕か？ 僕は超人（直訳すれば超河童です。）だ。」
</p>
<p>
トックは昂然と言い放ちました。
</p>
<p> 窓の外の往来にはまだ年の若い河童が一匹、両親らしい河童をはじめ、七八匹の雌雄の河童を頸のまわりへぶら下げながら、息も絶え絶えに歩いていました。しかし僕は年の若い河童の犠牲的精神に感心しましたから、かえってその健気さをほめ立てました。 <em>ふん、君はこの国でも市民になる資格を持っている。……時に君は社会主義者かね？</em> 僕はもちろん <em>qua</em>（これは河童の使う言葉では「然り」という意味を現わすのです。）と答えました。 <em>では百人の凡人のために甘んじてひとりの天才を犠牲にすることも顧みないはずだ。</em> <em>では君は何主義者だ？ だれかトック君の信条は無政府主義だと言っていたが、……</em> <em>僕か？ 僕は超人（直訳すれば超河童です。）だ。</em> トックは昂然と言い放ちました。 </p>
p {
text-indent: 1em;
margin: 0;
width: 30em;
}
em {
display: block;
margin-left: 1em;
text-indent: -1em;
color: #070;
}
em:before {
content: "「";
}
em:after {
content: "」";
}<p> 窓の外の往来にはまだ年の若い河童が一匹、両親らしい河童をはじめ、七八匹の雌雄の河童を頸のまわりへぶら下げながら、息も絶え絶えに歩いていました。しかし僕は年の若い河童の犠牲的精神に感心しましたから、かえってその健気さをほめ立てました。<br> <em>「ふん、君はこの国でも市民になる資格を持っている。……時に君は社会主義者かね？」</em><br> 僕はもちろん <em>qua</em>（これは河童の使う言葉では「然り」という意味を現わすのです。）と答えました。<br> <em>「では百人の凡人のために甘んじてひとりの天才を犠牲にすることも顧みないはずだ。」</em><br> <em>「では君は何主義者だ？ だれかトック君の信条は無政府主義だと言っていたが、……」</em><br> <em>「僕か？ 僕は超人（直訳すれば超河童です。）だ。」</em><br> トックは昂然と言い放ちました。 </p>