こんにちは！
インターン生のOigamiです。
今更ながら基本中の基本
インライン要素とブロックレベル要素の違いに戸惑っております。
中央揃えにならない・・・
私だけかもしれないですが、この要素の違いであることが多いです。
ブロックレベル要素
ブロックレベル要素は、見出し・段落・表など、文書の骨組みとなる要素で、一つのブロック（かたまり）として認識されます。
幅を画面いっぱいに取り、前後が改行されます。 これらの中には大抵他のブロック要素や、インライン要素を含む事が出来ます。
ブロックレベル要素の代表的な例はこちら
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
インライン要素
インライン要素は、主にブロックレベル要素の中身として用いられる要素で、文章の一部として扱われます。
例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
インライン要素の中に ブロック要素を含むことはごく稀な例外を除き殆ど無いそうです。
インライン要素の代表的な例はこちら
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
displayプロパティ
さらにこれらのインライン要素、ブロックレベル要素の形式を変更することがdisplyプロパティです。
グローバルナビ等の<a>タグにdisplay: block;をすることありますよね。
例
display: none;→要素が表示されません
display: inline;→インラインボックスを生成
display: block;→ブロックボックスを生成
display: inline-block;→インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。
このdisplyプロパティ、レイアウトする時に結構重要になってきます。
要素の違いで効くcssプロパティも違う
冒頭でも言いましたが、整列できない理由がここにあります
ブロックレベル要素の場合
css
margin – 上下左右指定できます。
padding – 上下左右指定できます。
width – 指定できます。
height – 指定できます。
インライン要素の場合
css
margin – 左右は効くけど、上下は効きません。
padding – 一応上下左右効くけど、上下は見た目的には効いてない風に見えます …。
width – 効きません。
height – 効きません。
同じインライン要素でもimg 、inputはこれら全部効きます
整列させたい時に使う
text-align
vertical-align
などはインライン要素を含むブロックレベル要素にしか効きません。
このブロックレベル要素やインライン要素も考えてレイアウト出来る様になりたいですね
ということで今日はここまで。
今回参考にさせて頂いたサイトはこちら
displyプロパティについてはこちら
ここまで見てくださった方ありがとうございます
by Oigami