HTMLタグ・CSS｜CSS辞典｜１行目だけ余白 text-indent

Home≫CSS辞典≫１行目だけ余白 text-indent

１行目だけ余白 text-indent

≪ 文字・行間隔 layout-grid-type	【 HOME 】	見たまま表示 white-space ≫

１行目だけ余白（サンプル）

サンプル用の文字です。
サンプル用の文字です。
サンプル用の文字です。
サンプル用の文字です。
サンプル用の文字です。

サンプル用の文字です。
サンプル用の文字です。

▼

サンプル用の文字です。
サンプル用の文字です。
サンプル用の文字です。
サンプル用の文字です。
サンプル用の文字です。

サンプル用の文字です。
サンプル用の文字です。

※ 上が通常の状態で、下が実際に効果を反映したサンプルです。

１行目だけ余白（詳細情報）

字体

text-indent:★;

指定

★の部分に数字をを指定します。
数字の後に単位を決めることができます。
　（単位の種類：　%　px　pt　mm　cm　in　pc　em　ex　）

効果

段落の先頭文字前のスペースをとることができます。

例１

<div style="text-indent:20px;">
サンプル用の文字です。
サンプル用の文字です。
サンプル用の文字です。
</div>

結果

サンプル用の文字です。
サンプル用の文字です。
サンプル用の文字です。

例２

<table border style="text-indent:20px;">
<tr>
<td>
サンプル用の文字です。
サンプル用の文字です。
</td>
</tr>
<tr>
<td>
サンプル用の文字です。
サンプル用の文字です。
</td>
</tr>
<tr>
<td>
サンプル用の文字です。
サンプル用の文字です。
</td>
</tr>
</table>

結果

サンプル用の文字です。
サンプル用の文字です。

解説

例２のように table部分に指定すると、全マスに反映します。

≪ 文字・行間隔 layout-grid-type	【 HOME 】	見たまま表示 white-space ≫

練習用書き込みフォーム（サンプル表示）
<div style="text-indent:20px;"> サンプル用の文字です。<br /> サンプル用の文字です。<br /> サンプル用の文字です。<br /> サンプル用の文字です。<br /> サンプル用の文字です。<br /> </div> <table border style="text-indent:20px;"> <tr> <td> サンプル用の文字です。<br /> サンプル用の文字です。<br /> </td> </tr> <tr> <td> サンプル用の文字です。<br /> サンプル用の文字です。<br /> </td> </tr> <tr> <td> サンプル用の文字です。<br /> サンプル用の文字です。<br /> </td> </tr> </table> <textarea rows="8" cols="28" style="text-indent:20px;"> サンプル用の文字です。サンプル用の文字です。サンプル用の文字です。サンプル用の文字です。サンプル用の文字です。 </textarea>

練習用書き込みフォーム（サンプル表示）

１行目だけ余白 text-indent｜CSS辞典｜HTMLタグ・CSS

１行目だけ余白 text-indent