When it comes to designing with HTML5 and CSS3, is it more beneficial to rely on margin and padding for layouts or should positioning be the main focus?
I have always combined both methods to achieve desired outcomes but there are examples where each approach can be effective, as demonstrated below:
HTML
<div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
</ul>
</div>
CSS Example 1 - Utilizing margin and padding
div{
width:1000px;
margin:auto;
}
ul{
margin-left:10px;
width:100px;
}
li{
height:30px;
}
span{
margin-top:10px;
}
CSS Example 2 - Focusing solely on positioning (Except for margin:auto ..)
div, ul, span{
position:absolute;
}
div{
width:1000px;
margin:auto;
}
ul{
left:10px;
width:100px;
}
li{
height:30px;
}
span{
top:10px;
}