2

ここ数時間、要素の margin CSS プロパティ (少なくとも)が基本的に無視される理由を理解しようとしました。td

たとえば、このフィドルは、要素を使用したテーブル行の「シミュレーション」を示し、その後に単一divの「実際の」要素が続きます。(この投稿の最後に、これらすべての完全なコードを示します。) a をシミュレートする には class が与えられ、同様に、s をシミュレートするs には class が与えられています。for の CSS は、 for の CSS に可能な限り近いものに保たれています(唯一の例外は、この場合に適用されない CSS ディレクティブです)。同様に、との CSS はほぼ同じです。特に：tabletrdivtrTRdivtdTDdiv.TRtrtrdiv.TDtd

div.TD,td{border:1px solid black;}
div.TD,td{margin:15px;padding:5px}

さらに、 eachdiv.TDおよび eachには、次の次元を持つtd空の要素が含まれています。div

div.TD > div,td > div{width:90px;height:60px;}

ご覧のとおり、要素div.TDとtd要素の両方の CSS 仕様には、同じマージン、境界線、およびパディングの仕様があり、同じサイズのコンテンツがあります。それでも、下の画像に示すように、div.TD要素のみが指定された余白と境界線を表示します。の場合、tdこれらの寸法は両方とも事実上 0 です。(同様に不可解なのは、要素に指定された境界線は表示されますが、div.TR要素に同じように指定された境界線は表示されないという事実trです)。

結果

一番上の行は div を使用した「シミュレーション」で、一番下の行は正真正銘のtable要素行からのものです。一番上の行に表示されている薄茶色の領域は、指定された 15 ピクセルの余白に対応しています。緑色の領域 (「シミュレートされた」テーブル セルと「実際の」テーブル セルの両方で表示される) は、指定された 5px のパディングに対応します。

この行動の矛盾の理由を理解したい

...しかし、私は説明を見つけることができませんでした。言い換えれば、この矛盾の論理的根拠/動機は何ですか。 または、少なくとも、この明らかな不一致の原因となっている公式の CSS ルールをどのようにすればすぐに見つけることができたでしょうか。(私はこれを検索しましたが、見つかりませんでした。より具体的には、私が見つけたものは、省略により、上記の 2 つのケースに違いはないはずであることを暗示しています。)

(私が見つけたものはすべて、せいぜい、特定の効果を達成するためのレシピにすぎませんが、これらのレシピは、行動の矛盾の問題に光を当てるものではありません。そのような解決策は、基本的には表面的な応急処置です。そもそもこの疑問につながる根底にある理解の欠如)。

OK、約束どおり、上でほのめかされたコードは次のとおりです。

CSS

/* basic reset */
body{background:white;}
html,body,div,table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0}
table{border-collapse:collapse;border-spacing:0;}
/* demo-specific css begins here */
div.TR{display:table;}
div.TR,tr{border:1px solid #EE0000;}
div.TR,tr{background:#E8B36D;}
div.TD{float:left;display:inline;}
table{clear:both;}
div.TD,td{border:1px solid black;}
div.TD,td{background:#409152;}
div.TD,td{margin:15px;padding:5px}
div.TD > div,td > div{background:#1E4C6D;}
div.TD > div,td > div{width:90px;height:60px;}

HTML

<div class="TR">
 <div class="TD">
  <div></div>
 </div>
 <div class="TD">
  <div></div>
 </div>
</div>

<table>
 <tr>
  <td><div></div></td>
  <td><div></div></td>
 </tr>
</table>
4

3 に答える 3

3

それは仕様が指示するものだからです。

17.5 テーブルコンテンツのビジュアルレイアウト

内部テーブル要素は、コンテンツと境界線を含む長方形のボックスを生成します。セルにもパディングがあります。内部テーブル要素には余白がありません。

（強調追加）

于 2013-08-28T20:23:44.263 に答える
0

テーブルで設定されているため、次を使用します。

table{
    border-spacing: 5px; 
}

など。

于 2013-08-28T20:22:57.953 に答える
0

どうやらあなたは運が悪いようです。スタックオーバーフローに関するこの回答は、「内部テーブル要素」のマージンを除外するいくつかのW3 ドキュメントにリンクしています。

于 2013-08-28T20:25:47.350 に答える