-2

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?

Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69
bool3max
  • 2,748
  • 5
  • 28
  • 57
  • 3
    Margins and Positioning are two extremely different subjects..please read more about them and do it accordingly.. – Lal Aug 30 '15 at 17:24
  • http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css that might be useful to you. Don't use absolute positioning unless there is no other way to achieve the effect you want. Otherwise, you should be deciding between padding and margins, and this link is very helpful. – Georgette Pincin Aug 30 '15 at 17:36
  • Margins and absolute positioning have a very different end result. They are really in no way alternatives to each other. So you should never end up asking whether to use margins or absolute positioning. – Roope Aug 30 '15 at 17:39

2 Answers2

2

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.

Ankit Agarwal
  • 1,350
  • 10
  • 15
1

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.
Jason
  • 31
  • 5