I am introducing a series of CSS tricks that I have learned over the past couple of years. Many of these techniques, in fact most, were not created by me, however I use them almost every day. Hopefully, every couple of days, I will share another CSS rule or set of rules that I use regularly to help me through the day.
For today, I’ll keep it simple:
Zero-ing or defaulting out tags:
html, body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
I put this CSS declaration in every project I start. It’s basically a way of blanking out your canvas before you start. This technique extends beyond the html and body tags and into every kind of tag. For instance, if you don’t know how a browser displays a UL or an OL, you may want to zero out the margin and padding to know what you are working with. The idea is that not all browsers display HTML elements in the same manner.
Check back soon for another set of common tricks in CSS I use.
Looking forward to the series.
Hey, that’s a good idea, I generally only start by zero-ing the margin and padding. but I generally use a wildcard for that.
Nice!
I usually use the star element to reset margin and padding.
* { margin:0; padding:0;}
I never used width:100%; and height:100%; in html, body.
What they do?
width and height @ 100% reset or set the page width and height to 100% of the available width and height. This really helps when you specify inner page elements as a certain width or height of their parent.
I’ll release a later trickery that will make use of this rule ;)
Width does nothing, it is standard at 100%.
And IE puts a border around its page, so it should be more like this:
html, body{
margin:0;
padding:0;
border:0;
height:100%;
}
Just a reminder, make use of this CSS technique on pesky forms like this:
form{margin:0px;
padding:0px;
}
What a nice website this!! Cool and Fresh. Congratulations.. Just one stupid question: This theme is so original, so.. can you share it?
Regards.. and good job Rogie.
You can even go a bit further to reset any or all properties that are rendered differently or have different default values across various platforms. Check out Blueprint (a CSS framework) at Google Code http://code.google.com/p/blueprintcss/
Very simple but very useful, Thanks a lot!