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

Question

假设我的网站上有一个简单的 table

<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

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

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

Answer 2

为了回答您的问题，我们假设有多个 table 与您一个接一个地相似。如果使用 position:absolute 样式和 top 将无法完成任务。因为在那种情况下，您必须手动计算每个 table 需要多少顶部像素，而如果您使用 margin-top 样式规则。无需手动计算，它将轻松完美地工作。因此，这两种样式规则彼此不同，并且出于不同的原因使用。希望大家理解。

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

Using margins vs absolute positioning when positioning elements?

html

css

css-position