ホームページ > 記事 > ウェブフロントエンド > CSSでタグ間の間隔を調整する方法
CSSでタグ間の間隔を調整する方法
- WBOYオリジナル
- 2021-11-15 16:21:149121ブラウズ
調整方法: 1. aタグに「margin: 上マージン、右マージン、下マージン、左マージン;」スタイルを追加 2. 「margin-left: 左マージン;」と「マージン」を追加-top" を a タグに追加すると、:Top margin;"、"margin-right:right margin;" などのスタイルでマージンが異なる方向に設定されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
css でタグ間の間隔を調整する方法
1. CSS では、margin 属性を使用してタグ間の間隔を設定できます。 margin属性を設定可能 aタグのマージンは、margin-left属性を使用して別途マージンを設定することもできます。
margin 省略表現プロパティは、1 つの宣言ですべての margin プロパティを設定します。この属性には 1 ～ 4 の値を指定できます。
この短縮プロパティは、要素のすべてのマージンの幅を設定するか、各側のマージンの幅を設定します。
ブロックレベル要素の垂直方向に隣接するマージンはマージされますが、インライン要素は実際には上下のマージンを占有しません。インライン要素の左右のマージンはマージされません。同様に、フローティング要素のマージンはマージされません。負のマージン値を指定することもできますが、使用する場合は注意してください。
例:
margin:10px 5px 15px 20px;
は、上マージンが 10 ピクセル、右マージンが 5 ピクセル、下マージンが 15 ピクセル、左マージンが 20 ピクセルであることを意味します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
margin:0px 0px 0px 202px;
}
</style>
<head>
<body>
<a href="#">a标签1</a><a href="#">a标签2</a>
</body>
</html>2. 「margin-left: 左マージン値;」という別の表現方法もあります サンプルコードは以下の通りです：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
margin-left:202px;
}
</style>
<head>
<body>
<a href="#">a标签1</a><a href="#">a标签2</a>
</body>
</html>出力結果：
上記の例では、「margin-left: left margin value;」スタイルが label 要素に追加されます。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がCSSでタグ間の間隔を調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。