CSSでタグ間の間隔を調整する方法-CSSチュートリアル-php.cn

CSSでタグ間の間隔を調整する方法

WBOY

リリース： 2021-11-15 16:21:14

オリジナル

9121 人が閲覧しました

調整方法: 1. aタグに「margin: 上マージン、右マージン、下マージン、左マージン;」スタイルを追加 2. 「margin-left: 左マージン;」と「マージン」を追加-top" を a タグに追加すると、:Top margin;"、"margin-right:right margin;" などのスタイルでマージンが異なる方向に設定されます。

CSSでタグ間の間隔を調整する方法

このチュートリアルの動作環境: 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>

ログイン後にコピー

出力結果：

CSSでタグ間の間隔を調整する方法