第一階段：由外而內第一層 div 請仔細觀察 (div的display預設是block)

    <div> 這是第一層第1個容器區塊 </div>
    <div> 這是第一層第2個容器區塊 </div>
    <div> 這是第一層第3個容器區塊 </div>
    <div> 這是第一層第4個容器區塊 </div>

    <style>
      div { background-color: greenyellow; border: 1px solid green; }
    </style>

第二階段：第二層 span 請仔細觀察 (span的display預設是inline)

    <div> 這是第一層第2個容器區塊 
      <span class="s1"> 這是行中局部內容 </span>
    </div>

    <div> 這是第一層第3個容器區塊 
      <span class="s2"> 這是行中局部區塊 </span>
    </div>

    <style>
      span.s1 { background-color: hotpink; padding: 10px; margin: 10px; width: 300px; }
      span.s2 { background-color: hotpink; padding: 10px; margin: 10px; width: 300px;
                display: inline-block; }
    </style>

第三階段：第二層 img 請仔細觀察
(img的display主要是inline, 但擁有寬高能力, padding、margin也有意義, 屬於inline-block)

<div> 這是第一層第4個容器區塊 
  <img src="../img/images/flower/f8.jpg" alt="">
</div>

<style>
  img { background-color: #fff; padding: 10px; margin: 20px; width: 150px; }
</style>

這是第一層第4個容器區塊