HTMLまたはwebページで余分なスペースを作成する方法

extra    space

This text has lots of spaces

<pre class="tab">This text has lots of spaces</pre>

要素またはオブジェクトの周りに余分なスペースを作成する

HTML要素には、上、右、下、または左に追加のスペースを追加できます。 ただし、要素またはオブジェクトの周りに追加するスペースのタイプを決定する前に、marginとpaddingの違いを理解してください。 下の図に見られるように、パディングは要素を囲み、境界線の内側、および境界線の外側の余白を囲みます。

以下の例は、段落を境界線で囲み、余白でインデントし、左右に間隔をあけて示しています。,

余白とパディングを持つ段落の例。

上記の例は、以下のコードを使用して作成されました。

コードの最初のセクションでは、”margin-left:2.5em;”は、2.5emの左マージンを追加します。 この例に示すように、この間隔は境界線の外側にあります。 次のセクションでは、”padding:0 7em2em0;”は、上、右、下、および左（時計回り）のパディングを定義しています。 “0”の上のパディング、”7em”の右のパディング、”2em”の下のパディング、および0の左のパディングがあります。, この例の残りの部分は、境界線の見た目を定義しています。

CSSとHTMLを使用してタブを作成する

要素の左マージンを調整することにより、HTMLでタブを作成することができます。 たとえば、この段落は、テキストを含む要素から2.5emの左余白を持っています。 この左マージンを作成するためのCSSを以下に示します。

.tab { margin-left: 2.5em}

このコードをCSSファイルに配置した後、任意のテキストに”tab”クラスを適用してタブの外観を作成できます。 Margin-leftの値は、ニーズに応じて増減できます。,

上記の方法をお勧めしますが、margin-left CSSは、以下の例に示すようにインラインで追加することもできます。

<p style="margin-left:2.5em">An example of a 5em left margin.</p>

5em左マージンの例。

• ウェブページまたはHTMLでテキストをインデントまたはタブにするにはどうすればよいですか？

テキストの行または段落の下にスペースを追加する

テキストの行または段落の下に余分なスペースを追加する必要があり、一度だけ行う必要がある場合は、<br>タグを使用できます。 以下は、この手法を適用する方法の例です。,

<p>This sentence contains example text.<br><br>As you can see, two breaks add the space above.</p>

上記のコードは、以下に示すテキストを作成します。

この文にはテキスト例が含まれています。
ご覧のとおり、二つの休憩が上のスペースを追加します。

必要に応じて追加の休憩を追加できます。 ただし、ページ上の複数の場所で行われている場合は、前述のCSSメソッドを使用してテキストの周りにパディングと間隔を追加することをお勧めし