「CSS」ディスプレー属性inline、block、in-blockについて

🙋‍♀️ display
CSSでは、displayプロパティによって、ページ上の要素がどのように表示されるか、他の要素とどのように配置されるかが決まります.displayプロパティ値はinline、block、inline-blockを表します.
1. inline
inline、その名の通り、inline要素とは、要素間が同じ行に位置し、すぐそばにあることを意味します.
代表的なinline要素はspanまたはa、emラベルなどであってもよい.
widthプロパティとheightプロパティを指定すると、行内エンティティは有効になりません.
👉 これは、タグの内容と同じサイズのスペースしか使用できないためです.
また、marginプロパティとpaddingプロパティは左右の間隔のみを反映し、上下の間隔は反映されません.
ex)
html

<a>A</a>
<span>SPAN</span>
<em>EM</em>

css

span {
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}

上記のコードの結果は以下の通りです.
3つのinlineの性質を持つタグが1行あることがわかります.また,spanの背景色はコンテンツサイズと同じである.widthとheightの値は無視されました.
2. block
blockはinineとは逆の性質を有する.
block要素とは、この要素の横(左右)に他の要素を貼り付けることはできません.
したがって、displayプロパティがblockとして指定されたエンティティは、前後の改行機能を有し、他のエンティティを別の行にプッシュし、独自に1行を占有する.
ほとんどのHTML要素(以下、要素と略す)はblock要素で、header、footer、p、li、table、div、h 1などがあります.
block elementはinline elementとは異なり、width、height、margin、paddingプロパティが反映されます.
ex)
html

 <h1>H1</h1>
 <div>DIV</div>
 <p>P</p>

css

div {
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}

コードの結果は次のとおりです.

各ブロック要素は自動的に1行を占め、背景色も1行を埋めます.
3. inline-block
displayプロパティがinline-blockとして指定されたエンティティは、基本的にinlineエンティティのように、1行に他のエンティティと配置されます.ただし、inline elmentでは不可能なwidthプロパティとheightプロパティ、marginプロパティとpaddingプロパティの上下間隔を指定できます.
👉 すなわち,inlineの性質を有し,ユーザのニーズに応じてモデルを組織することができる.
button、input、selectラベルなどが代表的なinine-block要素です.
inline block要素は、その要素のスタイルがdisplay:inline blockであることを明確に指定する必要があります.
ex)

span {
  display: inline-block;
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}

inlineの性質はあるが,marginなどが適用されていることがわかる.
🍯 の最後の部分
デフォルトでは、各HTMLタグのdisplay属性値は目的の値であり、CSSを使用して自由に変更できます.
ex)

span {
  display: block;
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}

inline特性を有するspanにはblockが明示的に表示され、block特性に変換される.
displayの気性に注意して、よく利用して...!!