div 和 span 的差異
CSS 的div 和span 很容易搞混,覺得只要是要規劃區塊的都可以用這兩個,但是在寫ＣＳＳ時後,這個地方要用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