Question

我们说我的网站上有一个简单的表格

<table class="table table-striped table-bordered">
    <tr>
        <th>Name</th>
        <th>Version</th>
        <th>Edition</th>
        <th>Expire Date</th>
        <th>Owner</th>
    </tr>
    <tr>
        <td style="color:red;">HomeX</td>
        <td>1.83</td>
        <td>Basic</td>
        <td>13.07</td>
        <td>All</td>
    </tr>
</table>

我希望从顶部移动它20px。我应该使用保证金

margin-top:20px;

或更好地使用绝对定位

position:absolute;
top:20px;

哪种方式更好？

Answer 1

要回答您的问题，请考虑有多个表格与您一个接一个的表格相似。如果使用position:absolute样式和top，则无法完成任务。因为在这种情况下，您必须手动计算每个表需要多少顶部px，而如果使用margin-top样式规则。无需人工计算即可轻松完成。因此，两种风格规则彼此不同并且由于不同的原因而被使用。我希望你明白。

Answer 2

如果您的意图只是在表格和前一个元素之间添加空格，请使用边距。绝对定位元素可能具有相同的效果，但也有其他（可能）不良副作用：

它从页面流中删除元素，这意味着下一个元素将被渲染，就好像它不存在一样。
如果父元素未定位，那么您的表将相对于最近的祖先或页面本身定位。

定位元素时使用边距与绝对定位？

2 个答案: