Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

CSSのマージン(余白)

CSSマージン(余裕)プロパティは、要素の周囲の空間を定義します。


マージン

(国外)素子領域の周囲の明確なマージン。 余裕ない背景色が完全に透明ではありません

マージンは、個々の要素、下、左、右の余白に変更することができます。 また、一度すべてのプロパティを変更することができます。

可能な値

説明
オート お使いのブラウザのマージンを設定します。
結果はブラウザに依存します
長さ 一定のマージン(ピクセルを使用して、PT、EMなど)を定義
パーセンテージマージンを使用して定義

発言 マージンは、負のオーバーラップしたコンテンツを使用することができます。


<H2Margin - 一方的marginプロパティ

CSSでは、異なる余白の異なる側面を指定することができます。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

»をお試しください


余白 - 速記プロパティ

コードを短くするためには、一つの特性指定マージンのすべてのマージンのプロパティを使用することが可能です。 これは簡略記述特性と呼ばれています。

すべてのマージンプロパティの短縮形プロパティは「余裕」です。

margin:100px 50px;

»をお試しください

マージンプロパティは、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 左マージン内の要素。
マージン右 右マージンの要素。
マージントップ 要素は余白に設定されています。