Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Should you design HTML and CSS layouts using primarily margin/padding or positioning?

Should you design HTML and CSS layouts using primarily margin/padding or positioning?

Problem

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

  • 1
  • 2

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;
    }
Problem courtesy of: Dan

Solution

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.

Solution courtesy of: thirtydot

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Should you design HTML and CSS layouts using primarily margin/padding or positioning?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×