ブロック要素とインライン要素、簡単にまとめてみた。

ブロック要素とインライン要素がごちゃ混ぜになるので、まとめてみました。
今回は、

　１.　２つの要素の違い
　２.　ブロック要素、インライン要素の具体的な例
　３.　ブロック要素、インライン要素を変える方法
　４.　忘れてしまった時のための裏技
　５.　まとめ

の順で説明していきます。

###そもそもブロック要素とインライン要素って何？
って人のために、２つの要素の違いを簡単に書いておきます。
#２つの要素の違い

	改行	width, height	margin, padding, border
ブロック要素	○	○	○
インライン要素	×	×	△

この表を見れば一目瞭然です。

#####１. 　ブロック要素　
・自動的に改行される。
・widthとheightが効く。
・margin, padding, borderを指定することができる。

#####２. 　インライン要素
・自動的に改行されない。
・widthとheightが効かない。
・margin, padding, borderを追加で設定することはできるが、他の要素の邪魔をすることがあるので注意が必要である。
　（・上下のmarginは設定すること自体できない。）
　

#ブロック要素、インライン要素の具体的な例

ブロック要素	< p >	< div >	< h1 >〜< h6 >	< table >
インライン要素	< a >	< span >	< img >

など...

#ブロック要素、インライン要素を変える方法
そもそもの要素自体を変えることもできちゃいます。
つまりブロック要素をインライン要素に、またはインライン要素をブロック要素に変えることができます。

css

/* pタグはもともとブロック要素です */
p {
     display: inline;
}

/* aタグはもともとブロック要素です */
a {
     display: block;
}

css上のdisplayプロパティを使うことによってブロック要素とインライン要素を逆にできます。

#忘れてしまった時のための裏技
Googleのデベロッパーツール（Google Chrome Developer Tools）を使えばブロック要素なのかインライン要素なのか簡単に知ることができます。
さらにwidthやmarginなどがちゃんと効いているかを確認できます。

1. 検証でデベロッパーツールを開く。　　
   　

2. stylesでdisplayが何になっているのか確認する。

3. またstylesの中に width, height, margin, padding, border を一気に見ることができる図があるのでそこで確認する。

Googleが出しているデベロッパーツールの使い方のサイトを見つけたので貼っておきます。詳しく知りたい方はどうぞ。

Chrome DevTools - Google Developers(https://developers.google.com/web/tools/chrome-devtools?hl=ja)

#まとめ
・ブロック要素とインライン要素では、width, height, margin, padding, borderの設定において違いがある。特にインライン要素は要注意。

・displayプロパティを使えば要素自体を変えることができる。

・Googleのデベロッパーツールの中にあるstylesを見ればwidthやmarginなどが効いているか簡単に確認することができる。