Today as I was driving home from work I was thinking about ways to accomplish margins in CSS. This was probably due to a code inspection of a certain CSS file I was doing a few days ago that was ugly as hell. It made me think that maybe the number of WYSIWYG/clickety-click editors of CSS/HTML that produce DIV layouts is reaching the point where this needs discussing.
In my opinion a good HTML developer is one with at least a few years of experience doing various web sites on various platforms. This is due to all the things that can screw up a layout when things go off the chart either via user-generated content or by the constant redevelopment. You just can’t learn all the quirks and good practices through reading.
Up untill now it was really simple to figure out if somebody was proficient in CSS – they were using DIV layouts. Now you just can’t. And there are so many ways to create a layout that are just plain wrong and some people don’t know why. I’m not saying I always do but I think all the years of experience help.
So back to the beginning – let’s take a list item element. There is a bunch of ways you can change it’s margins. Let’s first look at the left margin.
- text-indent:10px;
- margin-left:10px;
- padding-left:10px;
- position:relative;left:10px;
Now let’s look at the top margin.
- margin-top:10px;
- padding-top:10px;
- position:relative;top:10px;
If you add more elements to the mix you get even more options and usually more confusion.
If you’re proficient in CSS you should be thinking of other ways to do this. If you’re not you should know that ‘margin’ property is the way to go and that ‘padding’ property is the only way to add the padding. It’s really the same discussion as why an unordered list with items should be ul-li and not a p-br. And I hope you do know that one…