フロントエンド開発者として、ピクセル完璧なレイアウトを提供できるようにするには、CSS ボックス モデルを理解することが成功か失敗かです。早速、コンテンツ ボックスとボーダー ボックスという 2 つのボックス モデル タイプのコンテキストで、インライン要素とブロック要素の両方がどのように異なる動作をするかを説明しましょう。

基本: 箱の中身は何ですか?

詳細に入る前に、ボックス モデルとは何なのかを要約する価値があります。ページ上のすべての要素はボックスです (実際にはボックス状に見えない要素も同様です)。ボックスは、他のボックス内にある、他のボックスを含んでいる、および/または横にある場合があります。

ボックス モデルはすべてに適用され、次のもので構成されます:

• コンテンツ ボックス: 実際のコンテンツ (テキスト、画像、その他のもの) が存在する HTML 要素または CSS 疑似要素。
• パディング: コンテンツと境界線の間のスペース。
• Border: パディングとコンテンツを囲む行。
• Margin: 他の要素を押しのける境界線の外側のスペース。

つまり、

インライン要素とブロック要素の主な違い

ボックス モデルがインライン要素とブロック要素にどのような影響を与えるかという主な違いを理解することが重要です。

1. Width: デフォルトでは、ブロック要素はコンテナ全体に拡張されます。インライン要素?コンテンツに十分なスペースを占有します。

2. Height: ブロック要素の場合、パディング、ボーダー、マージンはすべて高さを増加させます。インライン要素は、垂直方向のパディングや境界線に関係なく、行の高さ内に収まります。

3. レイアウトへの影響: ブロック要素は水平方向と垂直方向の両方のレイアウトに影響します。インライン要素はすべて水平方向のフローに関するものであり、垂直方向の間隔への影響は最小限に抑えられます。

4. マージン折りたたみ: マージン折りたたみはブロック要素に固有の動作で、隣接する垂直マージンがマージされる可能性があります (つまり、1 つの要素の margin-bottom:20px が margin-top に折りたたまれる可能性があります)。次の要素に 20 ピクセルを追加し、20 ピクセルのマージンを 1 つ作成します)。インライン要素はこのゲームをプレイしません。

ボックス モデルのコンポーネントとインライン要素とブロック要素の違いがわかったので、コンテンツ ボックスがインライン要素であるかブロック要素であるかに応じて、ボックス サイズ プロパティによってどのような影響を受けるかを見てみましょう。

ボックスのサイズ設定: コンテンツ ボックスとボーダー ボックス

ボックス サイズ プロパティは、要素の幅と高さの計算方法を制御し、レイアウトに大きな影響を与える可能性があります。

1. インライン要素を含むコンテンツボックス

box-sizing: content-box がインライン要素に適用される場合:

• 幅と高さ: 幅はコンテンツによってのみ決定されます。この幅の上にパディング、ボーダー、マージンが追加されます。
• レイアウトへの影響: インライン要素はテキストの流れを妨げないため、要素の幅はコンテンツと同じ幅のみになります。垂直方向のパディングと境界線は視覚的に存在しますが、周囲の線の高さには影響しません。

2. ブロック要素を含むコンテンツボックス

box-sizing: content-box がブロック要素に適用される場合:

• 幅と高さ: 指定された幅または高さはコンテンツ領域にのみ適用されます。パディングとボーダーがこの外側に追加され、要素全体のサイズが大きくなります。
• レイアウトの影響: 特に指定しない限り、ブロック要素はデフォルトでコンテナの全幅に拡張されます。パディングとボーダーにより要素のサイズが増加し、隣接する要素が遠くに押し出されます。

3. インライン要素を含むボーダーボックス

box-sizing: border-box がインライン要素に適用される場合:

• 幅と高さ: 幅にはコンテンツ、パディング、境界線が含まれます。コンテンツ領域は、指定された幅内にパディングと境界線が収まるように縮小されます。
• レイアウトの影響: 要素の幅は引き続きコンテンツによって決まりますが、パディングとボーダーがこの幅内に含まれるようになりました。垂直方向のパディングと境界線は視覚的には残りますが、行の高さは変更されません。

4. ブロック要素を含むボーダーボックス

box-sizing: border-box がブロック要素に適用される場合:

• 幅と高さ: 指定された幅と高さには、コンテンツ、パディング、境界線が含まれます。これは、追加するパディングやボーダーの量に関係なく、要素の合計サイズが指定された寸法と一致することを意味します。
• レイアウトの影響: パディングとボーダーが指定された幅内に含まれるため、ブロック要素のサイズがより予測しやすくなります。これにより、特に要素を横に並べる場合に、レイアウト設計の管理が容易になります。

content-box がデフォルトですが、border-box がより直感的で、最大限の制御を提供すると広く考えられていることに注意してください。

CSS ボックス モデルは単なる強力な概念ではなく、フロントエンド開発ツールの基礎となるツールです。ボックスのサイズ変更がインライン要素とブロック要素にどのように異なる影響を与えるかを理解することで、誤動作するレイアウトのトラブルシューティングに煩わ​​されることなく、シャープで機能的な完璧なレイアウトを作成できるようになります。

ボックス モデルでこのダウンロードを気に入っていただけた場合は、左上のハート型のボックスにカーソルを合わせて、この投稿に愛を伝えてください。