如何减少css中的填充？

Question

我的HTML代码：

<div class="body" id="contact">
<form>
<table>
<tr>
<td><label>Name</label></td>

CSS：

  div.contact {
    float: left;
   background: url(../images/separator-light-vertical.png) repeat-y right top;
   height: 225px;
   width: 254px;
   padding: 20px 40px 0 20px;
}

它在那里显示了一个很大的间距，如何减少名称和文本框之间的空间。

Answer 1

" . "是班级和 " # "是ID。

所以你正在使用<div class="body" id="contact">

应该是：

#contact{
    float: left;
    background: url(../images/separator-light-vertical.png) repeat-right top;
    height: 225px;
    width: 254px;
    padding: 20px 40px 0 20px;
}

更新：1

根据屏幕截图，我确实希望这对您有用。

代码：

<div class="body" id="contact">
<form>
<table>
<tr>
<td class="firsttd"><label>Name</label></td>
<td><input type=text></td>
</tr>
<tr>
<td class="firsttd"><label>Gender</label></td>
<td>
<input type=radio >Male
<input type=radio>Female
 </td>
  </table>

CSS：

 .firsttd{
  width:auto;
  }
 .subtd{     
 width:auto;
 }

 #contact {
float: left;
 background: url(../images/separator-light-vertical.png) repeat-y right top;
 height: 225px;
 width: 254px;
 padding: 20px 40px 0 20px;
 border:2px solid teal;
 }

更新了HTML代码：

Answer 2

应该是

  #contact {
    float: left;
   background: url(../images/separator-light-vertical.png) repeat-y right top;
   height: 225px;
   width: 254px;
   padding: 20px 40px 0 20px;
}

Answer 3

由于它是id，您可以直接在css中使用id选择器

#contact{
   float: left;
   background: url(../images/separator-light-vertical.png) repeat-y right top;
   height: 225px;
   width: 254px;
   padding: 20px 40px 0 20px;
}

当浮点数应用于元素时，它也不会有效地将其从文档流中取出，因此向其父元素添加填充不会对其产生影响。

Answer 4

将样式赋予＆＃34; td＆＃34; tag，（删除默认的填充和边距，然后为这些属性编写自定义样式）

Answer 5

填充你正在申请的是第一个用于“顶部”第二个用于“右”第三个用于“底部”而最后一个用于“左”记住这些尝试用减少填充。它向这个方向移动。