Global White Space Reset (CSS/html)



This may not be useful to many people, but I thought it was interesting. If you do web design and use css you’ll probably like this… I found this post at leftjustified.net about a neat way to “reset” the padding and margin css information which can help for designing sites to display the same when using CSS. Unfortunately, many browsers have little quirks in displaying css, maybe they have strange default settings which cause css placement to look, well, strange, from one browser to another… in comes this little trick…


1. * {
2. padding:0;
3. margin:0;
4. }

Simple, elegant and effective reset of padding and margin information. They take it a bit further though…

Here’s another example

1. * {
2. padding:0;
3. margin:0;
4. }
5. body {padding:5px;}
6. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin:20px 0; }
7. li, dd, blockquote { margin-left: 40px; }
8. fieldset { padding:10px; }

Nice, but it has fixed px placement – what if someone resizes the browser or changes fontsize???

1. * {
2. padding:0;
3. margin:0;
4. }
5. h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
6. li, dd { margin-left:5%; }
7. fieldset { padding: .5em; }

Very nice… very fluid and very consistent rendering. The link above has example pages to browse as well. This is one of the nicest css tips I think I’ve seen.

Related Posts

Blog Traffic Exchange Related Posts
  • Google as a tool for crackers Google is a search tool which I use literally every day. Sometimes it's multiple times per day. Sometimes I can't imagine how I would function without being able to do a quick google search. There are some features that I don't often use and in some ways have promised myself......
  • Creating a redirect page This is one that comes in handy a lot. Like many things in computing there are a number of ways to accomplish this. My favorite though is one fo the simplest. But first, it's probably worth asking why you would want a redirect page and just clarify what I mean.......
  • Denyhosts as an added defence to ssh server A couple days ago I had a brief article on the vandals banging away at the door of my ssh server. Like I said, I've, at times, been fairly smug abou the futility of their actions, but.... the persistance concerns me. Let me be more specific, I keep a fairly......
Blog Traffic Exchange Related Websites
  • Find the Greatest Budget Web Hosting Almost every business these days needs a good website. Some can be just informational websites about your brick and mortar business, or they can be sales sites that represent the whole business.Web design is costly, and most small businesses or internet businesses just starting out are hard pressed to spend......
  • Retain Reputable Inexpensive Web hosting in Web 2.0    (submitted 2011-10-28) Web internet hosting services contain permitting individuals to obtain their internet websites around the Globe Wide Net. Net hosting suppliers provide reasonably priced net style internet hosting services supplying information center along with colocation, therefore assisting a web site to garner an excellent......
  • What To Keep in Mind When Selecting a Web Host in Web 2.0    (submitted 2011-10-29) When all is smooth with your business site, you never think about your host - the opposite is very true, as well. Nothing is worse than trusting your host, not checking on it, and then find out your down-time is unacceptable.Many of the......
www.pdf24.org    Send article as PDF   

Similar Posts


See what happened this day in history from either BBC Wikipedia
Search:
Keywords:
Amazon Logo

Comments are closed.


Switch to our mobile site