ブロック要素とインライン要素の違い

こんにちは。

今週は月曜日はお休みなので火曜日の今日、記事を書いています＾＾

最近はIllustratorからの書き出しも教えていただいたのですが少し苦戦していました(^^;

独特な書き出し方法でこんなやり方なんだな〜と驚きました！

訓練校ではIllustratorは曲線の練習をした記憶しかありません・・・笑

しかし、数をこなすうちに少しは仲良く慣れた気がします！＾＾

これでPhotoshop、Illustrator、XDからの書き出しが出来るようになりました♩

さて、今日は今更感もありますが、ブロック要素とインライン要素の違いをおさらいしておこうと思います！！

ｗｅｂ制作をするにあたり、この２つの違いを理解しておくのは必須といっても過言ではありませんよね＾＾

ブロック要素

見出しや段落などの一つのかたまりのことで、文章構造の骨組。

例え文章が短くても範囲は横いっぱいに広がります！

なので必然的に前後に改行が入ります。

ex)

<h1>~<h6>,<p>,<div>,<ul>,<ol>,<table><dl>　など・・・

・ブロック要素のなかには他のブロック要素やインライン要素を配置することができる
・CSSで幅・高さの設定可
・上下のmargin設定可

名前の通り、ラインの中、つまり行の中の一部のまとまりを表しブロック要素の中で用いられます。

横幅は中のコンテンツの内容によって変わります！

続く要素がインライン要素で入れるスペースがあれば改行されずに横に並びます。

ex)

<a>,<span>,<strong>,<em>,<img>,<sup>,<small>,<input>　など・・・

・CSSで幅高さの設定不可（<img>や<input>など例外もあり）

・上下のmargin設定不可(左右は可)

・上下左右のpadding設定可

インライン要素の中にブロック要素は入れられません！

ざっくりですがこのような感じですね＾＾

思った通りに余白などが効かない場合はインライン要素が原因かもしれませんね。

では今日はここまで〜〜