CSSボックスモデルは、Webページレイアウトのコアです。各HTML要素は、コンテンツ、內(nèi)側(cè)の縁、境界線、外側(cè)の縁で構(gòu)成されています。 1.要素のサイズは、パディングと境界線の影響、および実際の幅=コンテンツパディング×2ボーダー×2を考慮する必要があります。 2。制御間隔は主にマージンに依存しますが、垂直マージンのマージの問題に注意を払う必要があります。 3。幅と高さには、簡単に計算できるパディングとコンテンツが含まれるため、ボックスサイズ：ボーダーボックスを使用することをお勧めします。 4.パラグラフのデフォルトマージン、インラインブロックブランクギャップ、フレックスチャイルドエレメントマージンの障害など、レイアウトの一般的な問題。デフォルトスタイル、負のマージン、またはフォントサイズの調(diào)整によって解決できます。

Webページレイアウトのコアは、実際には各要素の「ボックス」に隠されています。 CSSのボックスモデルを理解することは難しくありませんが、特に間隔の問題に対処する場合は、多くの詳細に注意を払う必要があります。

CSSボックスモデルとは何ですか？

簡単に言えば、各HTML要素はページ上の長方形のボックスであり、コンテンツ、パディング、境界線、マージンの4つの部分で構(gòu)成されています。

• コンテンツは、テキストと寫真を置く場所です。
• パディングは、コンテンツと境界の間のスペースです。
• 境界線は、パディングとコンテンツの周りの境界線です。
• マージンは、ボックスと他の要素間の外部距離です。

多くの人々は、開始時の全體的なサイズに対するパディングと境界の影響を無視する傾向があり、レイアウトの不整合につながります。たとえば、幅が100pxのdivが追加されている場合、パディング：10pxおよび境界線：2pxソリッド＃000が追加されている場合、実際の幅は実際には124px（100 10 2 2 2）です。

要素間の間隔を制御する方法は？

通常、2つの隣接する要素間の距離は、通常マージンで制御されます。ただし、注意が必要な一般的な「ピット」がいくつかあります。

• マージンの崩壊：垂直方向の2つのマージンが1つに融合する場合があります。これは、複數(shù)の段落またはタイトルを使用するときに発生することがよくあります。
• マージンに依存しすぎないでください。フレックスまたはグリッドレイアウトのギャップ屬性を使用して間隔を制御する方が直感的である場合があります。
• ボックスサイズを使用：ボーダーボックス：この方法で設(shè)定した後、幅と高さにはパディングとコンテンツが含まれており、全體のサイズの計算が容易になります。

例えば：

 。箱 {
  幅：200px;
  パディング：20px;
  國境：1pxソリッド＃333;
  ボックスサイズ：ボーダーボックス;
}

上記のコードは、パディングや境界に関係なく、 .boxの総幅を200pxに保ちます。

実際のレイアウトの一般的な間隔の問題

実際のプロジェクトでは、これらの狀況がしばしば遭遇します。

• パラグラフ間のギャップは、ブラウザがデフォルトでPタグにマージンを追加したため、大きすぎます。
• インラインブロックレイアウトを使用する場合、HTMLの空白シンボルによって引き起こされる要素間に不可解なギャップがあります。
• フレックスコンテナ內(nèi)の子要素の縁は有効になりませんか？親コンテナのアライメントにより干渉する場合があります。

これらの問題の解決策は次のとおりです。

• デフォルトのマージンとパディングをリセットします（通常、CSSの開始時に書かれています）
• インラインブロック要素に負のマージンを追加するか、親要素を設(shè)定しますフォントサイズ：0
• 開発者ツールを使用して、計算されたスタイルをチェックして、マージンが上書きまたは無効かどうかを確認します

一般に、ボックスモデルを理解することは、良いページレイアウトを作成するための基礎(chǔ)です。それを過小評価しないでください、多くのレイアウトの問題は、パディング、マージン、ボックスサイズの誤用に起因します。これらのコアコンセプトを習(xí)得した後、最も複雑なレイアウトでさえ段階的に分解できます。

基本的にそれだけです。

以上がCSSボックスモデルと間隔の理解の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。