CSS中為什麼想要通過margin設置td元素之間的距離卻沒有效果?而設置padding卻可以?


不知道你有沒有研究過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


推薦閱讀:

如何讓一個絕對定位的div中的圖片垂直居中?
Css中怎樣才能添加圖片邊框呢?

TAG:CSS | DivCSS | HTMLCSS | CSS布局 |