1

毎日小さな余白で区切られたボックスでカレンダーを作成しようとしています。問題: マージンが適用されません。日付の周りに赤い境界線を追加しました。コードでわかるように、境界線の間にマージンがありません。無関係な CSS をすべて削除し、一時的に!importantプロパティを追加しました (これは嫌いです。私がどれほど絶望的かを理解してください)。私は自分が間違っていることを絶対に見ることができないので、助けていただければ幸いです。

コードはこちらです。


編集
hrunting's answer で参照されているコードを追加しました

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

私のコードに、しかしそれは何の違いもないようです。(赤い境界線を削除しました。日付用の別のボックスがある場合は、いつ機能するかを確認してください。)

4

2 に答える 2

1

ここでこの StackOverflow の回答を読んでください。

基本的に、内部テーブル要素にはマージンが適用されていません (また、余白は境界線の外側ではなく内側にあるため、パディングは必要ありません)。必要な外観を得るには、属性と一緒に属性を使用する必要がありborder-spacingますborder-collapse。

また、定義cellspacing=0から HTML 属性を削除します<table>。

于 2013-02-03T13:28:27.147 に答える
0

テーブルセルにマージンを直接適用することはできません。ここでテーブルの仕様を読むことができます：http ：//www.w3.org/TR/CSS2/tables.htmlそしてテーブルセルが独自のボックスモデルを持っていることを確認してください。@Praveenが提案するようにパディングを追加できますが、パディングには制限があります。たとえば、境界線の外側のスペースを増やしたい場合は、機能しません。パディングは実際にはセル内のスペースを増やすため、異なる効果があります。

この質問の重複の可能性：CSSセルマージン

その質問からの引用：

それでは、「正しい」方法は何ですか？テーブルのcellspacing属性を置き換える場合は、border-spacing（border-collapseが無効になっている）が置き換えられます。ただし、セルごとの「マージン」が必要な場合、CSSを使用してそれを正しく達成する方法がわかりません。私が考えることができる唯一のハックは、上記のようにパディングを使用し、セルのスタイリング（背景色、境界線など）を避け、代わりにセル内のコンテナDIVを使用してそのようなスタイリングを実装することです。

于 2013-02-03T13:32:16.910 に答える