はじめに
ブロック要素とインライン要素。
CSSを書いていて初学者が沼るポイントの一つではないでしょうか。
私はこの要素の違いがよく分からず、毎回なんとなくやっていていました。
なんとなくなので、入れ込んでは、できない。あれ、今回はいけた。と、効率が悪かったので今回まとめることにしました。
? : ブッロク要素ってなに
「常に新しい行から始まり、幅が親コンテナの全体を占める要素」
◼︎ブロック要素の特徴
・新しい行から始まる: ブロック要素は他の要素とは別の行に配置されます。
・幅を全て占める: デフォルトでは、親要素の幅全体を占めます。
・高さと幅を設定可能: width や height プロパティを使って明示的に高さや幅を設定できます。
◾︎ブロック要素はこれ ⬇️
<div>
<p>
<h1> ～ <h6>
<ul> と <ol>
<li>
<section>
<article>
<header>
<footer>
レイアウトの主要な構造を作るために使われる。
？ : インライン要素とは
「他のインライン要素と同じ行に並び、内容に応じた幅を持つ要素」
◼︎インライン要素の特徴
・同じ行に並ぶ: 他のインライン要素と同じ行に並んで表示されます。
・幅が内容に応じて決まる: 親要素の幅全体を占めるのではなく、その内容に応じた幅を持ちます。
・高さと幅を設定できない: width や height プロパティが無視されます。
◾︎インライン要素はこれ ⬇️
「上記のブロック要素以外」
（少し雑かもしれませんが、覚えやすくするために手っ取り早くいきます。）
具体例として、
<span>
<a>
<img>
<em>
<strong>
<i>
<b>
<u>
<code>
<label>
<abbr>
<cite>
ページの主要な構造ではなく、内容の一部を細かく装飾するために使用される。
？ : インライン要素の大きさ調整はどうやってするん
インライン要素は、
"高さと幅を設定できない: width や height プロパティが無視される”
インライン要素こそ、高さと幅設定をしたい。
→【結論】paddingとmarginを駆使する。
1. padding
インライン要素の周囲にパディングを設定することで、コンテンツの周囲に空白を追加できる。
パディングはコンテンツの外側に適用されるため、要素自体のサイズには影響しませんが、見た目のサイズを調整するのに役立つ。
2. margin
インライン要素の周囲にマージンを設定することもできる。マージンは要素とその周囲の要素との間のスペースを指定するが、インライン要素自体のサイズには影響しない。
3. インライン要素の外側にブロック要素を配置する（奥の手？）
インライン要素のサイズ調整が難しい場合、そのインライン要素を含むブロック要素を使用して、ブロック要素のサイズを調整する方法もある。この場合、ブロック要素にはサイズ（高さ・幅）を指定できるため、その中にインライン要素を配置し、必要に応じてサイズやスタイルを調整することができる。
まとめ
ブロック要素とインライン要素を使い分けることで、効果的なページレイアウトを作成することができる。
・ブロック要素は、
L ページの大きな構造を作るのに使われ
L 新しい行に表示され
L 幅全体を占める。
例:<div>, <header>, <section>
・インライン要素は、
L テキストの一部や小さな部分の装飾に使われ
L 同じ行に表示され
L 内容に応じた幅を持つ。
例:<span>, <a>, <em>
おわりに
インライン要素を制するものがCSSを制する。
インライン要素は種類がありすぎてよく分からんので、ブロック要素以外と覚えるといいというのは新しい発見でした。
そして、今までインライン要素にheight,widthをあてては、なんで反映されないんだろう。と首を捻っていた原因が判明してすっきりしました。
基本のキを理解することの大切さを改めて感じました。
と、思っていたら、インライン要素をブロック要素にするには、
display:block;
display: inline-block;
float: left; もしくは float: right;
などの3つの選択肢があることを忘れてました。なんなら上記３つの方がよく使うやり方、、。
今度は、上記について深掘りしたいと思います。
そして、インラインブロック要素という要素もありました。
いろんな要素がありますね、一つずついきます。
と思ったら、インラインブロック要素というHTMLタグ（<>）は存在せず、CSSのプロパティの一つなんですね、なんで要素っていうんだろう。ややこしい。