web-dev-qa-db-ja.com

HTMLの段落の左マージンを設定する

5つのスペースを入れてから段落を開始したいのですが、最初の行の下にあるすべての行は直線になるはずです。つまり、段落内のすべての行には、開始する前に5つのスペースが必要です。

この段落はデータベースから取得しています。

完全な段落の左マージンを定義するHtmlタグが必要です。

htmlparagraphs
8
Ishan
<p style="margin-left:5em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia vestibulum quam sit amet aliquet. Phasellus tempor nisi eget tellus venenatis tempus. Aliquam dapibus porttitor convallis. Praesent pretium luctus orci, quis ullamcorper lacus lacinia a. Integer eget molestie purus. Vestibulum porta mollis tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

それで十分です。明らかにいくつかの改善点がありますが、それが基本です。また、測定値として'em'を使用しています。'px'などの他の単位を使用することもできます。

編集：彼らが上で説明しているのは、スタイルまたはクラスのグループをWebページの要素に関連付ける方法です。あなたはそれをいくつかの方法で実装することができます、ここにあなたに合うかもしれないものがあります：

HTMLページに、DBからの<p>タグ付きコンテンツを含めて、新しい「スタイル」ノードに追加し、宣言するスタイルを次のようなクラスでラップします。

<head>
  <style type="text/css">
    p { margin-left:5em; /* Or another measurement unit, like px */ }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia vestibulum quam sit amet aliquet.</p>
</body>

したがって、上記のように、ドキュメント内のすべての<p>要素にそのスタイルルールが適用されます。おそらく、あなたはあなたの段落の内容をある種のコンテナに送り込んでいますか？これを試して：

<head>
  <style type="text/css">
    .container p { margin-left:5em; /* Or another measurement unit, like px */ }
  </style>
</head>
<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia vestibulum quam sit amet aliquet.</p>
  </div>
  <p>Vestibulum porta mollis tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
</body>

上記の例では、クラス名が「container」であるdiv内の<p>要素のみにスタイルが適用され、コンテナ外の<p>要素は適用されません。

上記に加えて、スタイルをまとめて<head>タグからスタイル要素を削除し、外部CSSファイルを指す<link>タグに置き換えることができます。この外部ファイルは、<p>タグスタイルを配置する場所です。この概念は「スタイルからコンテンツを分離する」と呼ばれ、優れたプラクティスと見なされており、スタイルを作成する拡張可能な方法でもあり、メンテナンスの手間を軽減できます。

14
danjah