webページでHTMLに余分なスペースを作成することは、作成するスペースのタイプに応じて、さまざまな方法で実現できます。 次のセクションを含む多くの異なる方法を余分のスペース用のHTMLとCSSで,
テキストの前または後に余分なスペースを作成する
webページを作成している新しいユーザーにとって最も混乱することの一つは、スペースバーを複数回押すことができないということです追加のスペースを作成します。 テキストの前、後、または間に余分なスペースを作成するには、 （改行なしのスペース）拡張HTML文字を使用します。
たとえば、”余分なスペース”を使用すると、HTMLに次のコードがあります。,
extra space
WYSIWYGエディタを使用して上記のコードを入力する場合は、HTMLタブまたはHTMLコードを編集している必要があります。
拡張特殊HTML文字のリストについては、”拡張特殊HTML文字の完全なリスト”を参照してください。
ページに貼り付けられるテキストの間隔を保つ
余分なスペースまたはタブを含むテキストを貼り付ける場合は、HTMLの<pre>タグを使用してテキストの書式設定を維持できます。, 以下は、<pre>タグを使用して余分なスペースを含むテキストを貼り付ける方法の例です。
This text has lots of spaces
上記の例は、以下のHTMLコードを使用して行われます。
<pre class="tab">This text has lots of spaces</pre>
- HTMLを参照してください<pre>このタグの詳細については、タグページを参照してください。注WYSIWYGエディタを使用して上記のコードを入力する場合は、HTMLタブまたはHTMLコードを編集している必要があります。,
要素またはオブジェクトの周りに余分なスペースを作成する
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メソッドを使用してテキストの周りにパディングと間隔を追加することをお勧めし
追加情報
- HTMLまたはCSSでwebページ上のテキストを整列する方法。
- フォーマットされていないHTMLテキストを作成する方法。
- 詳細および関連リンクについては、空白の定義を参照してください。,
- HTMLおよびwebデザインのヘルプとサポート。
