爲什麼我的CSS中的邊距沒有應用？

我正在嘗試爲每個日曆創建一個盒子，並以小的空白分隔。問題：邊距不適用。我在日期周圍添加了紅色邊框，正如您在the code中看到的那樣，邊框之間沒有邊距。我刪除了所有無關的CSS，甚至臨時添加了一個!important屬性（我討厭，去圖我是多麼的絕望），無濟於事。我絕對不能看到我做錯了什麼，所以任何幫助表示讚賞。爲什麼我的CSS中的邊距沒有應用？

代碼爲here。

編輯
我加入hrunting的回答

#calendar table { 
    border-collapse: separate; 
    border-spacing: 2px 2px; 
}

到my code提到的代碼，但它似乎沒有任何區別。（我刪除了紅色的邊框，你可以看到，如果你有日期不同的盒子時，它的工作原理。）

來源

2013-02-03 stevenvh

我編輯我的答案，包括去除'CELLSPACING = 0'屬性。這會讓你得到你需要的結果。 – hrunting

讀this StackOverflow answer here。

基本上，內部表格元素沒有對其應用邊距（並且填充不是您想要的，因爲該邊距在以內，而不是外部）。你需要使用border-spacing attribute along with the border-collapse attribute來獲得你想要的外觀。

此外，從您的<table>定義中移除cellspacing=0 HTML屬性。

來源

2013-02-03 13:28:27 hrunting

謝謝，我會看看它。我已經知道填充不是解決方案，我在發佈你的時候正在評論其他答案。 – stevenvh

+1感謝編輯，這似乎修復它。我可能也會接受這個，但我通常會等待一天，以便讓其他人也回答。 – stevenvh

表細胞不能有餘量直接施加到它們。您可以閱讀表格上的規格：http://www.w3.org/TR/CSS2/tables.html並查看錶格單元格有自己的盒子模型。您可以像@Praveen建議的那樣添加填充，但填充有限制。例如，如果你想增加邊界以外的空間不起作用。填充實際上增加了單元格內的空間，因此具有不同的效果。

這個問題可能重複：CSS Cell Margin

來自這個問題摘自：

什麼是那麼「正確」的方式？如果您正在尋找替換表格的 cellspacing屬性，則邊界間距（禁用邊框摺疊爲）是替代。但是，如果每個單元格需要「邊距」，我不確定如何使用CSS實現。我可以想到的唯一劈是使用填充作爲以上，避免了細胞的任何樣式（背景顏色，邊框等），而使用在細胞內容器的DIV實現這樣造型。

來源

2013-02-03 13:32:16 DMTintner

感謝您的回覆。我不認爲這個問題是重複的。提問者似乎對接受的答案感到非常滿意，這隻能告訴我們如何讓內容更加分離，但它不適用於我的問題。 – stevenvh

爲什麼我的CSS中的邊距沒有應用？

回答

相關問題