このマニュアルでは、2 つのリンクの間にスペースを作成する手順を説明します。
始めましょう！
HTML と CSS で 2 つのリンクの間にスペースを空ける方法は?
2 つのリンクの間にスペースを空けるには、まず、必要なリンクを HTML ファイルに追加します。
ステップ 1: HTML にリンクを追加する
HTML では、
HTML
< 分周 >< a href = 「https://linuxhint.com/create-html-file/」 > HTML ファイルの作成方法 < / a >
< a href = 「https://linuxhint.com/edit-html-file/」 > HTML ファイルを編集するには? < / a >
< / 分周 >
次の画像は、リンクが正常に追加されたことを示しています。
ステップ 2: Div とリンクのスタイルを設定する
このステップでは、「」を使用して div とリンクのスタイルを設定します。 分周 」をCSSで。パディングを「 40px 」、リンクのフォントサイズを「 大きい 」、divの高さは「 150px 」、background プロパティを使用して、div の色を「 黒 」。その後、ボーダー幅を「 5px 」、スタイルは「 破線 」と「 RGB(251, 255, 0) 」。
CSS
分周 {パディング : 40px ;
フォントサイズ : 大きい ;
身長 : 150px ;
バックグラウンド : 黒 ;
国境 : 5px 破線 RGB ( 251 、 255 、 0 ) ;
}
上記のコードを使用すると、次の出力が得られます。ご覧のとおり、div とリンクの両方がスタイル設定されています。
ステップ 3: 2 つのリンクの間に水平方向のスペースを空ける
HTML と CSS を使用して、2 つのリンクの間に横方向にスペースを空けることができます。ここでは、両方の方法を 1 つずつ説明します。
方法 1: HTML を使用する
外部 CSS を記述せずにリンク間にスペースを空けるには、「 スペースを作成する HTML 内の '。 「 」は改行なしスペースを表します。 HTML ファイルでは、 を 1 つ追加することは、1 つのスペースを意味します。より多くのスペースを与えたい場合は、必要なスペースの数に応じて を手動で追加することは好ましくありません。
記載されている概念を理解するために、例に移りましょう!
例
ここでは、「」を 4 回書きます。 」を使用して、最初のリンクの後にスペースを作成し、2 つ目のリンクが 4 つのスペースの後に表示されるようにします。
HTML
< 分周 >< a href = 「https://linuxhint.com/create-html-file/」 > HTML ファイルの作成方法 < / a >
HTML ファイルの編集方法
ご覧のとおり、最初のリンクの右側にスペースが作成されます。
方法 2: CSS を使用する
CSS では、「 右マージン 」 2 つのリンクの間にスペースを与えるプロパティ。 「 右マージン 」プロパティを利用して、要素の右側からスペースを追加します。負の値を設定することもできます。
構文
margin-right プロパティの構文は次のとおりです。
右マージン : 価値の場所で ' 価値 」、要素の右側からの余白を設定します。例を続けましょう。
例
ここでは、「 a 」をクリックして、HTML で作成したリンクにアクセスします。次に、margin-right プロパティの値を「 50px 」：
a {右マージン : 50px ;
}
以下に示すように、最初のリンクの右側からスペースが作成されます。
ステップ 4: 2 つのリンクの間に垂直方向のスペースを空ける
2 つのリンク間に垂直方向のスペースを確保するには、まずリンクを垂直方向に揃えます。これは、「 ブロック 「の値」 画面 」プロパティを使用して、「 行の高さ 」 2 つのリンク線の間にスペースを空けるプロパティ。
例：
ここでは、表示プロパティの値を「 ブロック 」でリンクを縦に並べます。次に、line-height プロパティの値を「 80px 」：
a {画面 : ブロック ;
行の高さ : 80px ;
}
ご覧のとおり、スペースは line-height プロパティを使用して作成されます。
それでおしまい！ HTML&CSSで2つのリンクの間にスペースを空ける方法を解説しました。
結論
「 」、「 右マージン '、 と ' 行の高さ 」 CSS のプロパティを使用して、2 つのリンクの間に水平方向と垂直方向のスペースを空けます。これを使うと、リンクの左右から間隔を調整できます。この記事では、2 つの異なる方法を使用して 2 つのリンクの間にスペースを空ける手順を説明し、関連する例を示しました。