定位元素时使用边距与绝对定位？ [关闭]答案

【问题标题】：Using margins vs absolute positioning when positioning elements? [closed]定位元素时使用边距与绝对定位？ [关闭]
【发布时间】：2015-08-31 01:44:15
【问题描述】：

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

<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;

哪种方式更好？

【问题讨论】：

边距和定位是两个截然不同的主题..请阅读更多关于它们的信息并相应地做..
stackoverflow.com/questions/2189452/… 这可能对您有用。除非没有其他方法可以达到你想要的效果，否则不要使用绝对定位。否则，您应该在填充和边距之间做出决定，这个链接非常有帮助。
边距和绝对定位的最终结果截然不同。它们实际上绝不是彼此的替代品。所以你永远不应该问是使用边距还是绝对定位。

标签： html css css-position

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：