[CSS] display要素のblockを理解するため、inline, inline-blockの使い方とサンプルを纏めてみた

こんにちは、今週からめっちゃCSSに傾倒中の @yoheiMuneです。
CSSをバリバリ使う仕事をしているのですが、自分のCSSの知識が部分的なので、苦戦中。。
今日は、CSSのうち、display要素3つを纏めたので、ブログを書きたいと思います。

display: inline

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

適用前

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

適用後

 <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を指定して、横並びにさせることと同じです。
ただし、古いバージョンのブラウザでは動作しない場合もあります。

適用前

• 1
• 2
• 3

<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>

適用後

• 1
• 2
• 3

<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>

最後に

CSSのdisplay要素について、色々と学べて良かった。
今回紹介した以外にも、table, table-cellをdisplayに指定できるようで。
それも近々学んで、ブログに書きたいと思います。

最後までお読み頂きましてありがとうございました(*ﾟ▽ﾟ)ﾉ