簡単アウトプット- 画面の考え方2-

今回は、

インライン要素

について考えます

今回の要素は「正方形の四角」です。

この要素に当てはまるのが

1. a
2. span

などの要素になります。たくさんあるのでGoogle先生に聞いてみてください。w

このブロック要素にCSSが指示できるのは

  • 余白(margin外側、padding内側 それぞれ左右のみ)

です。
なぜか? 正方形の積み木です。 その中に例えば「スーパーカリフラジリスティックエクスピアリドーシャス」と文字を入れます。 長いですよね。大好きなdisny映画の中に出てくる歌です。

インライン要素は中に入っているモノによって大きさが変わります。
例えば・・・
「花」!!で比べてみてください。

差っ・・・w

 
中身で幅が全然違いますよね。高さも変わってきますので指定はできません。

「スーパーカリ・・・・・」長いので「花」でいきます。

「花」が入っている四角い積み木ですが、横に並べて配置します。 正方形だから配置した時、横に余白あるでしょ? そんなイメージ!!

f:id:ayachuubuu:20210709134225p:plain
ブロック要素、インライン要素

画像お借りしました。参考までに。

どんどん、ややこしくなってきました・・・ インラインブロック要素はもう少し後で。

次回へ!!