Question

When creating HTML5 and CSS3 designs is it better to primarily use margin and padding for your designs over positioning or the other way around?

I’ve never really thought about it before and use both side by side to get the results where needed but it’s possible to design in both ways as shown in the examples below:

HTML

<div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
</ul>
</div>


CSS Example 1 – Using margin, padding

div{
    width:1000px;
    margin:auto;
    }
ul{
    margin-left:10px;
    width:100px;
    }
li{
    height:30px;
    }
span{
    margin-top:10px;
    }

CSS Example 2 – Using just positioning
(Apart from the margin:auto ..)

div, ul, span{
    position:absolute;
    }   

div{
    width:1000px;
    margin:auto;
    }
ul{
    left:10px;
    width:100px;
    }
li{
    height:30px;
    }
span{
     top:10px;
    }

Answer 1

For a typical page layout, Example 1 is much cleaner and you should choose that, given the choice.

Example 2 is bad because as soon as you start setting position: absolute on everything, any flexibility your design may have had goes out the window. You have to set explicit dimensions on everything.

In general (there are exceptions), avoid position: absolute for the main layout unless it’s only way to do it.

Here’s an example of the kind of problem I was talking about. It would appear that the user ended up using JavaScript to fix his problems. Not good.