CSSマージンとパディングを設定する方法、およびクールなレイアウトトリック

このチュートリアルは、CSSマージンとパディングの区別を明確にし、Webページの要素間隔への影響を示しています。 マージンの崩壊、レスポンシブデザインにおけるさまざまなユニットの意味を調査し、CSSマージンとパディングレイアウトテクニックで締めくくります。

重要な概念：

CSSボックスモデルは基本です。CSS要素は、コンテンツ、パディング、境界線、およびマージンによって寸法が定義される長方形のボックスです。

ボックスサイジングは初心者を混乱させることがよくあります。デフォルトの
• は、パディングと境界線を要素の幅と高さに追加し、レイアウトの問題を頻繁に引き起こします。 設定
は一般的なソリューションです。
• box-sizing: content-box CSSは、要素の4つの側面すべてのパディングとマージンを正確に制御します。パディングはコンテンツを取り囲みます。マージンは外層であり、要素とその隣人の間にスペースを作成します。 box-sizing: border-boxマージンとパディングには、コンテナ内の要素中心、要素間隔、画像のアスペクト比の維持など、汎用性の高いアプリケーションがあります。これらの手法を習得すると、多くのレイアウトの問題が解決します
• CSSボックスモデルが説明しました：

CSS要素は、

で構成される長方形のボックスです content（要素の内側のテキストまたは画像）

パディング（コンテンツとボーダーの間のスペース）

境界線（要素のアウトライン）
マージン（要素と他の要素の間の外部空間）
• 次の図は、この構造を示しています

CSSボックスのサイジングを理解する：

ボックスサイジングは、CSSの新人にとって頻繁に混乱の原因です。 パディングと境界が追加されているため、2つの50％の幅要素が容器に適合しない場合があります。

デフォルトで（）、パディングと境界線は、要素の全体的な幅を増加させます。 レイアウトを簡素化するには、指定された幅内にパディングと境界線が含まれているように

を設定します。 cssリセットは、しばしばグローバルにを適用します：

インタラクティブなデモを実験して、理解を固めてください。

box-sizing: content-boxcssでパディングを設定：box-sizing: border-boxborder-box

、

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

、

、

、

、またはshorthandプロパティを使用したコントロールパディング：

padding-topCSSのマージンの設定：padding-rightpadding-bottom padding-leftパディングと同様に、padding、

、

/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 2em 4em;

/* Top | Horizontal | Bottom */
padding: 1em 20px 2em;

/* Top | Right | Bottom | Left */
padding: 10px 10% 2em 15%;

、

、または速記プロパティを使用してください：

マージンは、要素間のスペースを作成します。margin-top margin-rightmargin-bottomマージンとパディングの考慮事項：margin-leftmargin

• ユニット：マージンやパディングの絶対ユニット（ピクセル）を回避します。パーセンテージまたは相対ユニット（EM、REM）は、画面のサイズとフォントの変更により適しています。

• ユニットの計算：ブラウザは、使用されたユニットに基づいてマージンとパディングを異なる方法で計算します（親の幅に基づいて、EMに基づくEM、viewport dimensionsに基づくビューポートユニットに基づいています）。

• マージンの崩壊：

  隣接する兄弟の上部と下のマージンは、単一のマージン（2つのうち大きい方）に崩壊する可能性があります。 パディングまたは境界線を追加すると、これが防止されます

実用的なアプリケーション：

センターリング：

• margin: 10px auto;

  間隔要素：
スペース要素にマージンを使用します。特にFlexBoxで役立ちます。

• アスペクト比の維持

  パディングトップをパーセンテージとして使用します（目的のアスペクト比から計算）高さの親要素で：イメージアスペクト比を維持するために。

• 結論：

このチュートリアルは、CSSマージンとパディングを理解し、使用するための強固な基盤を提供します。 高度なテクニックのさらなる調査により、CSSスキルが向上します。

以上がCSSマージンとパディングを設定する方法、およびクールなレイアウトトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。