CSS中為什麼想要通過margin設置td元素之間的距離卻沒有效果?而設置padding卻可以?
11-20
不知道你有沒有研究過display屬性的不同值對標籤的不同影響。
td標籤的display屬性默認值為table-cell,元素賦值此屬性值後不響應margin值
如果把td的display屬性值改為inline-block或block等值後,td就可以設置margin了
如果能單獨設置 td 的 margin ,表格裡面的 border 豈不是會亂成一團。
而且會有什麼場景會期望用 td margin 呢?表格內的tr,td,th等元素,默認是不支持margin的,除非改變display的值。想要修改單元格之間的間距,可以參考這篇文章:http://www.cnblogs.com/enone/archive/2010/07/27/1786138.html
這個坑我踩過,因為表格的特性是平分單元格,所以設置邊距無效。這個可以試試改變瀏覽器窗口大小,會發現表格也跟著放大縮小,越大則邊距或者說單元格寬度越大,反之亦然。但是可以設置單元格大小哦,不過只在自然的單元格寬度比設置的小時才有效果,大的情況下其中一個沒有設置寬度的單元格會分配剩餘寬度,若是都有寬度,那就平分剩餘寬度了。內邊距起效果也和這個原理差不多,但自然寬度大的時候還是會把內容撐大⊙?⊙。因為td元素間就沒有margin啊。
而且border的話也是特別的。
正常元素:
口 &<-元素A口 &<-元素B
table里的td:日 &<- 兩個元素緊緊貼合在一起(collapse的情況)
td沒有margin,table有border-space
推薦閱讀: