display: inline-block

要素の表示形式を決める

以下のサイトを参考にして要約。

ブロックレベル要素(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」の指定可能。