CSSボックスモデル.

CSSでBoxモデルについて話すとき、我々は単に要素の視覚的配置とデザインについて話しています.CSSボックスモデルがどのように動作するかを知っているなら、それは非常に簡単にWebページ上で整列し、スタイルの要素を取得します.
ボックスモデルを理解するには、最初にインラインとブロックの要素が何かを理解しなければなりません.


インライン要素

インライン要素は、その内容のスペース(可能な限り最小スペース)だけを取る.彼らは新しい行から始めません.例:a , span , strong , em など

ブロック要素:

これらは、そのスペースとして行全体を取る要素です.彼らはいつも新しい線から出発します.EG :div , h1 , p など

インラインブロック要素

インライン行の要素の高さと幅を調整することができます.インラインの要素ではできません.

ボックスモデルとは何か.

ボックスモデル.

CSSのボックスモデルは、ウェブページ上のHTML要素を1つだけラップする箱です.このボックスには、コンテンツ、パディング、ボーダー、マージンなどの4つの簡単なプロパティが含まれています.
このボックスでは、コンテンツとボーダーの間のスペースをパディングと呼び、境界の外側のスペースをマージンと呼びます.これらの特性を詳細に理解しましょう.

内容:
HTMLタグの中で実際の内容を書いています.内容の幅は、要素の種類によって異なります.

パディング

要素にパディングを追加すると、コンテンツとボーダーの間にスペースが追加されます.コンテンツの上にいくつかのスペースを追加するように.我々は、すべての側面にパディングを適用することができますまたは上部、下部、右、および目的のために別々に.

.box{
// for padding on all sides
padding: 5px;
// for specific top, bottom, etc,
padding-top: 5px;
padding-bottom: 5px; // and so on for right and left
} 

Border in above image is just used for better representation

ボーダー

コンテンツとパディングの後に来るのは境界です.つは、必要に応じて境界線をスタイルし、それを見えるかどうかを確認することができます.

我々は、すべての側面に境界線を適用することができますまたは上部、下部、右、左と希望のように分離します.

.box{
// for border on all sides
border: 1.5px solid black;
// for specific top, bottom, etc,
border-top: 1.5px solid black;
border-bottom: 1.5px solid black; // and so on for right and left
} 

余白

マージンは境界の外側のスペースです.我々は、すべての側に同じマージンを適用することができますまたは上部、下部、右、左と希望のように分離します.マージンは、2つの要素間のスペースを追加するために使用される特殊なプロパティです.

.box{
// for margin on all sides
margin: 5px;
// for specific top, bottom, etc,
margin-top: 5px;
margin-bottom: 5px; // and so on for right and left
} 

私が何を意味するのか

Suppose we have two elements besides each other and both have 2px margin applied. How much space will be there between them? Think for a second.
If the answer is 4px then we should understand that margin is relative property not absolute, the answer will be 2px only, because the element is set to be 2px away from the element besides it (and same for the other element) and hence thier margins will overlap.

まとめ
上記の4つのプロパティはCSSボックスモデルをまとめます.これはCSSボックスモデルに関する詳細な議論を結びます.あなたの時間を取って、この記事を読むためのおかげで、あなたはそれを読んで楽しんできた希望とそれが役に立つことを発見.あなたのフィードバックを共有することを躊躇しないでください.

レッツコネクト🤙🏻

Github