当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Using margins vs absolute positioning when positioning elements?

问题描述:

Let's say I have a simple table on my site

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

and I want to move it 20px from the top. Should i use margins

margin-top:20px;

or better use absolute positioning

position:absolute;

top:20px;

Which way is a better practice?

网友答案:

To answer your question, let's consider that there are multiple tables similar to the one you have one after the other. In case of using position:absolute style along with top wouldn't fulfill the task. Because in that case you have to calculate manually how much top px you want for each table, whereas if you use margin-top style rule. It will work perfectly with ease without manual calculation. Hence both style rules are different to each other and are used for different reasons. I hope you understand.

网友答案:

Use a margin if your intent is simply to add whitespace between the table and preceding element. Absolutely positioning the element may have the same effect but also has other (likely) undesirable side effects:

  • it removes the element from the flow of the page, meaning that the next element would be rendered as if it did not exist.
  • if the parent element is not positioned, then your table will be positioned relative to the nearest ancestor that is or to the page itself.
分享给朋友:
您可能感兴趣的文章:
随机阅读: