html - 表格行上的负边距

Question

我如何给出 <tr>向上移动负边距？我正在尝试移动 .small-item-block

<tr>
  <td class="item-name">Caprese</td>
  <td class="item-description">Fresh mozzarella, tomato, fresh basil and balsamic vinegar on a bed of spinach.</td>
  <td>$4.00</td>
  <td>$20.00</td>
</tr>
<tr class="small-item-block" >
  <td class="item-name"></td>
  <td class="item-addition-name">Add Bacon</td>
  <td class="item-addition-price">$1.00</td>
  <td class="item-addition-price">$3.00</td>
</tr>

CSS

tr.small-item-block  {
   margin-top: -10px;
   border-spacing: -10px;
}

这是 JS Fiddle .

Answer 1

你不能移动一个 tr，但是你可以设置 td 到 position: relative，然后设置一个负的 top 属性(property)，例如:

tr.small-item-block td {
    position: relative;
    top: -10px;
}

这是您更新的 fiddle :http://jsfiddle.net/L4gLM/2/