CSSのdisplay要素を色々と使ってみたページ

CSS3のdisplayに指定できる値を実際に試したサンプルと、そのソースコードを集約したページです。
このページをみることで、displayのそれぞれの値の振る舞いを理解出来れば良いなぁと思います。

display: inline

「display:inline」は、インライン要素としてElementを表示することが出来ます。
block要素であるh1やdivなどにinlineをしていすることで、他の要素と並べて表示できます。

適用前

inline適用前

<div>inline適用前</div>
<div>inline適用前</div>
<div>inline適用前</div>

適用後

inline適用後

 <div style="display: inline;">inline適用後</div>
 <div style="display: inline;">inline適用後</div>
 <div style="display: inline;">inline適用後</div>

dispaly: block

「display:block」を指定する事で、対象エレメントをブロック要素として表示することが出来ます。
例えば、img要素はインラインですが、display:blockを指定して、block要素として表現することがあります。

適用前

<img src="firefox.jpeg" alf="firefox"/>
<img src="chrome.png" alf="firefox"/>
<img src="safari.jpeg" alf="firefox"/>

適用後

<img style="display:block;" src="firefox.jpeg" alf="firefox"/>
<img style="display:block;" src="chrome.png" alf="firefox"/>
<img style="display:block;" src="safari.jpeg" alf="firefox"/>

display: inline-block

小さなブロック要素などを、inlineのように横並びに表示し、さらにそれぞれの要素の高さや幅を指定することが出来る指定方法です。
ブロック要素にfloatを指定して、横並びにさせることと同じです。
ただし、古いバージョンのブラウザでは動作しない場合もあります。

適用前

<style>
 .before li{
    list-style-type: none;
    border: 1px solid #ccc;
    margin: 5px;
  }
</style>
<ul class="before">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

適用後

<style>
 .after li{
    list-style-type: none;
    border: 1px solid #ccc;
    margin: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
  }
</style>
<ul class="after">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>