CSSのマージン(余白)
CSSマージン(余裕)プロパティは、要素の周囲の空間を定義します。
マージン
(国外)素子領域の周囲の明確なマージン。 余裕ない背景色が完全に透明ではありません
マージンは、個々の要素、下、左、右の余白に変更することができます。 また、一度すべてのプロパティを変更することができます。
可能な値
値 | 説明 |
---|---|
オート | お使いのブラウザのマージンを設定します。 結果はブラウザに依存します |
長さ | 一定のマージン(ピクセルを使用して、PT、EMなど)を定義 |
% | パーセンテージマージンを使用して定義 |
マージンは、負のオーバーラップしたコンテンツを使用することができます。
<H2Margin - 一方的marginプロパティ
CSSでは、異なる余白の異なる側面を指定することができます。
余白 - 速記プロパティ
コードを短くするためには、一つの特性指定マージンのすべてのマージンのプロパティを使用することが可能です。 これは簡略記述特性と呼ばれています。
すべてのマージンプロパティの短縮形プロパティは「余裕」です。
マージンプロパティは、1〜4個の値を持つことができます。 / P>
- マージン:25ピクセルは50px 75px 100pxに。
- 25ピクセルの余白には
- 50px右マージン
- 下マージンが75pxであります
- 100ピクセルの左マージン
- マージン:25ピクセルは50px 75px;
- 25ピクセルの余白には
- 50px、左右の余白
- 下マージンが75pxであります
- マージン:25ピクセルは50px;
- 25ピクセルの上下の余白
- 50px、左右の余白
- マージン:25ピクセル;
- すべての4つのマージンは25ピクセルです
より多くの例
cmの値を使用して、テキスト上の余白設定
この例では、上部余白のテキスト値センチを設定する方法を示します。
下マージンのパーセント値を使用してテキストを設定します
この例では、含む要素の幅に対する下部の余白の値の割合を使用して設定する方法を示しています。
すべてのCSSマージン特性
プロパティ | 説明 |
---|---|
マージン | 速記プロパティ。 1宣言内のすべてのマージンのプロパティを設定します。 |
マージン底 | 要素の外に設定します。 |
margin-left | 左マージン内の要素。 |
マージン右 | 右マージンの要素。 |
マージントップ | 要素は余白に設定されています。 |