google-chrome - これでパディングを増やすと垂直マージンが増えるのはなぜですか?

Answer 1

これは間違いなく box-sizing:border-box 属性の問題です。私の推測では、それをテーブル セル (div とは異なる方法で処理されます) 内に配置すると、ブラウザーが混乱します。多くの場合、新しいテクニックと古いテクニックが混在することはありません。

次のことをお勧めします。

table td a {
  background-color: orange;
  display: block;
  height: 100%;
  padding: 8px;
} 

表のセルが既にテキスト幅 + パディング幅に拡大されているため、 width:100% は不要でした。何らかの理由で、表のセルでパディングを高さ 100% に追加していないようです (図を参照してください、表の奇妙さ!笑)。より大きなテーブル セル幅に拡張する必要がある場合は、width:100% を元に戻してから、水平方向のパディングを削除することをお勧めします (つまり、padding:8px 0px; を配置します)。

Answer 2

高さpxをaasに設定してみてください

table td a {
  background-color: orange;
  box-sizing: border-box;
  display: block;
  height: 50px;
  padding: 8px;
  width: 100%;
}

Answer 3

このコードをテーブル td に追加します。

display:inline-block;

ボックスモデリングでは、テーブルとディビジョンに多少の違いがあるためです。

box-model スタイルを適用するには、非ブロック要素に display-block を設定する必要があります。

Answer 4

box-sizing 属性がこれを引き起こしていると思う限り、css を次のように変更します。

table td a {
   background-color: black;
   height: 100%;
   display:block;
   margin: 0;
   padding: 0px;
   width: 100%;
   padding-top: 12px;
 }

お役に立てば幸いです。

Answer 5

ここに陪審員の例があります: http://jsfiddle.net/rTAwd/

行の高さを使用してセルの高さを調整しているため、垂直方向の配置を台無しにする必要はなく、背景とパディングを提供するラッパー div に依存しています。

<div class="content">
    <table>
        <tr>
            <td>Hello, world!</td>
            <td>
                <div> <a href="#">Hello, world!</a></div>
            </td>
        </tr>
    </table>
</div>

CSS

div.content {
    background-color: green;
    height: 100px;
}
table td {
    background-color: red;
}
table td div a {
    line-height: 2em;
}
table td div {
    background-color: orange;
    padding: 8px;
}