CSSマージンプロパティを使用するにはどうすればよいですか? CSSマージンプロパティの使用方法のチュートリアル-CSSチュートリアル-php.cn

CSSマージンプロパティを使用するにはどうすればよいですか? CSSマージンプロパティの使用方法のチュートリアル

云罗郡主

リリース： 2018-11-07 14:14:12

オリジナル

8498 人が閲覧しました

CSS には重要な属性 margin があります。CSS の margin 属性が何なのかを知らない人も多いのではないでしょうか。 CSS margin プロパティの使用方法についてのチュートリアルの概要を次に示します。

CSSマージンプロパティを使用するにはどうすればよいですか? CSSマージンプロパティの使用方法のチュートリアル

マージンは、ステートメント内のすべての CSS マージンプロパティの CSS の略語です。これは、マージンが CSS のブロックレベル要素間の距離を制御するためであり、両方ではありません。見える。 [推奨学習: CSS3 チュートリアル ]

1: CSS マージン属性の使用方法

マージン属性には、以下に示すように多くの属性が含まれています。 :

margin left: 左内側マージンからの距離を設定することを意味します;

margin top: 上部要素のブロック距離を設定することを意味します;

margin right:右要素のブロック距離を設定することを意味します。

marginbottom: 下部ブロックの距離を設定することを意味します。

2: CSS margin 属性の使用方法のチュートリアル

1.margin left 使用法:

margin left: 50px; この構文の後には、左側の要素ブロックから 50 ピクセル、つまり要素からの距離の 50% が続きます。

例を観察するために、2 つのボックスを使用します:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>margin-left实例 www.divcss5.com</title> 
<style> 
.php-a,.php-b 
{float:left; width:150px; height:120px; border:1px solid #F00} 
.php-b{ margin-left:50px} 
.php-c{ margin-left:50px} 
</style> 
</head> 
<body> 
<div class="php-a"></div> 
<div class="php-b"></div> 
</body> 
</html>

ログイン後にコピー

値を変更して変化を観察できますが、影響を受けるのは要素の左スペースの位置とサイズです。。

2. マージン右の使用法は左マージンの逆であり、右の要素からのピクセル数として定義されます。

3.margin top: 50px、構文の後に数字が続きます。これは、上部の間隔が 50 ピクセルであることを意味します。または、パーセントで表すこともできます。

4. マージンボトムの使用法はマージントップの使用法と似ていますが、方向が逆です。

margin:10px を使用して上下左右を表現したい場合、margin の時計回りの回転を考慮する必要があります。 [推奨読書: margin: auto 属性の使用法の詳細な説明]

上記は CSS の margin 属性の使用方法です。 CSS margin 属性の使い方チュートリアルの完全な紹介 CSS3 ビデオチュートリアルについて詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がCSSマージンプロパティを使用するにはどうすればよいですか? CSSマージンプロパティの使用方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。