[CSS] div 和 span 的差異

CSS 的div 和span 很容易搞混,覺得只要是要規劃區塊的都可以用這兩個,但是在寫CSS時後,這個地方要用div好呢,還是用span好呢?, 之前我也常常沒有準則的想說大的地方用div,小的地方用span,但是為了更精確得知道這個地方要用div還是span,所以整理以下兩個的差別地方,來協助我判斷到底使用那一個好

  1. div 前後會自動換行
  2. span 前後不會自動換行
  3. div 加上display:inline 可以等同span
  4. span 加上display:block 可以等同div
  5. div 可以設定寬度和高度,預設的寬度等於頁面最大寬度,預設高度等於內容元件的高度
  6. span 無法設定寬度和高度,寬度和高度等於內容元件的高度和寬度
  7. 因為 display:inline 的元件 只能設定margin-left,margin-right,padding-left,padding-right
  8. 所以span 就只能設定margin-left,margin-right,padding-left,padding-right
  9. div 要置中:先設好寬度再指定上下距離和左右距離自動:{ width: ? px , margin: ?px auto ?px auto }
  10. span 要置中:因為無法設定寬度,所以必須在父元素設定text-align:center,來讓父元素的內容置中,達到span 置中的效果
  11. 如果需要設定原件寬度,但是又不希望它換行,可以將div或是span設成display:inline-block

 

2 則迴響於《[CSS] div 和 span 的差異