はじめに
幅の指定時には、％でもpxでもいいですよ。
と選択肢を与えられるとこんがらがってしまう初学者です。
こんな初歩的なことで？？？となる人はいないかもしれないけど、自分のためにまとめます。
※超初学者です。間違いがありましたらご指摘いただけると、とても嬉しいです。
結論
ブッロク要素：幅と高さをpxで指定。
インライン要素：親要素に依存するため基本％で指定。
他に％を使うのは、
・flexプロパティ
・レスポンシブデザイン
の時。
? : 幅って何に依存するの
ここでも親子関係が大事。
子要素の幅は親要素の幅の100％である認識を持つ。
その他ブロック要素とインライン要素でできることできないことが変わってくる。
ブロック要素：
・widthとheightを決められる。
インライン要素：
・widthのみ反映される。
・高さを変更できない。（メモ帳の罫線に入れ込んでいくイメージ）
→ 横幅も高さも、内容（テキストや画像の大きさ）に合わせて自動的に決まる。
例えば、ボタン(<a>)を作りたい
ボタン(<a>)を作りたい時など、テキストとコンテナの余白が欲しい時には、
①display: inline-block;
②line-heigt
の２つを両方を指定する。
！！❌NG！！
上記設定をすっ飛ばして上下にpdddingやmarginを指定しても、期待通りの反映にはならない。左右のみ反映されて、横に広がっていくだけ。
→ きれいに作りたい時は上記の①②の指定が必ず必要。
！注意！ ： 写真などのイメージを入れたいときには2段階必要
imgタグは横幅を指定しないと元々の大きさを維持するという特性がある。
大きさを変更したい場合には下記の2つの指定が必要。
設定方法
②imgタグにwidth: 100%;を指定。
①親要素の.classにimgの大きさをwidthで指定。
→ imgの細かい設定をする時は<div class="">をimgの親要素として付与して親子関係を作る。
おわりに
ブッロク要素は幅と高さをpxで、imgは％を使うことが多いというのがわかりました。あとflexプロパティの時も％ですね。
まだふんわりしたイメージしか持ててませんが、続けてみます。
幅のことなんてすぐ書けると甘くみてました。
芋づる式に分からないことが出てきて想像以上にまとめるのに時間がかかった。。
インライン要素のプロパティの当て方って親子関係を抑えないととっ散らかるということが今日もわかりました。