要素の表示形式を決める
以下のサイトを参考にして要約。
ブロックレベル要素(Block-Level Elements)
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
※ liタグはブロックレベル要素
インライン要素(Inline Elements)
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
display要素の値
block
幅(width)と高さ(height)の指定ができる。
上下左右にpadding(要素の内側の余白)とmargin(要素の外側の余白)の値を指定できる。
ブロックの中央寄せにtext-align:center vertical-align:middleは使えない。
ブロック要素を中央寄せする場合、margin-right:auto margin-left:autoを使う。
inline
blockの要素の中で使う。
inlineの要素は、CSSで幅と高さを指定できない。
inlineの要素の幅と高さは「要素の中身」で決まる。
inlineでは左右の余白(padding・margin)は指定できる。
上下の(margin)は指定できない。(padding)は指定できる。
「text-align」や「vertical-align」を指定できる。
inline要素にtext-alignを指定するときには、親要素に対して指定する。
inline要素にvertical-alignの指定するときには、inline要素に対して指定する。
inlineとblockはCSS指定で変更可能
例:
pタグをdisplay: inlineでinline要素へ変更可。
aタグをdisplay: blockでblock要素へ変更可。
display: inline-block
inline-blockの並びはinlineと同じで、改行が入らず横に並ぶ。
幅(width)と高さ(height)はblockと同じで指定可能。
余白(marginとpadding)はblockと同じで指定可能。
「text-align」や「vertical-align」の指定可能。