1

内部fieldsetでテーブルを使用していますが、凡例の下にギャップがあり、それを削除したいと考えています。と 凡例のインライン スタイルの両方でpadding:0pxandを使用してみました。しかし、どれも機能しませんでした。いくつかの提案を手伝ってください。margin:0pxfieldset

ありがとう！

編集：

選択メニューを使用しているため、コードは非常に巨大です。しかし、ここにコードの概要があります。

<fieldset>
          <legend><b>Options</b></legend>
          <table>
            <tr>
              <td colspan="1"><label>Passengers:&nbsp; </label></td></tr></table>    
</fieldset>

マージンとパディングはフィールドセットに対して機能していますが、凡例に対しては何もしていません。凡例によって生じるギャップを取り除く方法はありますか?

4

5 に答える 5

2

Eric Meyer の resetによるとmargin:0;、padding:0;フィールドセットと凡例の両方で機能するはずです。

コードをフィドルでテストすると実際に機能したため、この問題を引き起こす可能性のある他のいくつかのことは次のとおりです。

  1. パディング / テーブルに設定されたマージン / td
  2. ラベルの行の高さ / td
于 2012-09-23T09:54:18.217 に答える
1

デフォルトのレンダリングには、ドキュメントの外観を読みやすくするためのパディングが含まれる場合があります。デフォルトはブラウザーによって異なりますが、 および に垂直パディングが含まれている場合がfieldsetありlegend、ほぼ確実にtd要素に垂直パディングが含まれています。このようなパディングを削除するには、次を設定できます。

legend { 
  padding-top: 0;
  padding-bottom: 0;
}
fieldset, td { 
  padding-top: 0;
}

ただし、既定では表のセル間にも間隔があります。これは、単一セルの表であっても、セルの周囲にある程度の間隔があることを意味します。それを削除するクロスブラウザの方法は次のとおりです。

table {
  border-collapse: collapse;
}

これを追加すると、IE と Chromeで、凡例とセル コンテンツの間のスペースが削除されます (これは、要素legendと要素に背景色を設定することで確認できます)。labelFirefox では、1 ピクセルのギャップが残っているように見えますが、明確な説明はありません。

于 2012-09-23T17:31:26.027 に答える