text-indent

6231 ワード

  • インデントとインデント text-インデント属性にします.
  • が正の場合はインデントし、値が負の場合はインデントします.
  • のデフォルト値は0です.
  • と書くときは、左に適当に白を残します.
  • <!doctype html>
    <html lang="ko">
      <head>
        <meta charset="utf-8">
        <title>CSS</title>
        <style>
          p {
            font-size: 20px;
          }
          .a {
            text-indent: 2em;
          }
          .b {
            text-indent: -2em;
          }
          .c {
            text-indent: -2em;
            margin-left: 2em;
          }
        </style>
      </head>
      <body>
        <p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
        <p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
        <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
      </body>
    </html>
  • 最初の段落はインデントされています.
  • の2番目の段落は書かれています.サムネイルが領域を超えています.
  • 第3段が書かれていて、左側に空白が残っています.