HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色
色 RGB HEX HSL
CSSの背景
背景色 背景画像 背景の繰り返し 背景の添付ファイル 背景速記
CSSボーダー
ボーダーズ 境界線の幅 ボーダの色 ボーダーサイド ボーダー速記 丸みを帯びた境界線
CSSマージン
マージン マージン崩壊
CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要
概要 Outline Width Outline Color Outline Shorthand Outline Offset
CSSテキスト
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSSフォント
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSSアイコン CSSリンク CSSリスト CSSテーブル
Table Borders Table Size Table Alignment Table Style Table Responsive
CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート
Float Clear Float Examples
CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー
Navbar Vertical Navbar Horizontal Navbar
CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS！重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション
Linear Gradients Radial Gradients Conic Gradients
CSSシャドウ
Shadow Effects Box Shadow
CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの例

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSマージンの折りたたみ

❮ 前 次 ❯

2つのマージンが1つのマージンに折りたたまれることがあります。

マージン崩壊

要素の上下の余白は、2つの余白の最大値に等しい単一の余白に折りたたまれることがあります。

これは、左右の余白では発生しません。上マージンと下マージンのみ！

次の例を見てください。

例

マージン崩壊のデモンストレーション：

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

上記の例では、<h1>要素の下部マージンは50pxで、<h2>要素の上部マージンは20pxに設定されています。

常識的には、<h1>と<h2>の間の垂直方向のマージンは合計70px（50px + 20px）になると思われます。しかし、マージンの崩壊により、実際のマージンは50pxになります。

エクササイズで自分をテストする

エクササイズ：

<h1>要素に20ピクセルの左マージンを追加します。

<style>
h1 {
  : 20px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

すべてのCSSマージンプロパティ

Property Description
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

❮ 前 次 ❯