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
  • 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.......
  • Web translation I found this link of plugins for wordpress to aid in multilingual site building. I've been experimenting with English/Spanish designs of one site I maintain using plain html (index.html.en index.html.es and the server gives the correct page depending on the browser localization. It seems as though there was an .htaccess......
  • How much is it worth to you to have a responsive website? How can I say this.... this is one of the worst ideas I think I've heard this week from an ISP. (Maybe in a long time, but I'd have to think on that a few minutes.) An executive at Bellsouth thinks that ISP's ought to be able to charge certain......
Blog Traffic Exchange Related Websites
  • Do It Yourself On-Page Search Engine Optimisation 2011 If you run a small business, have a website and don’t have endless amounts of cash, Search engine optimisation matters to you. For those of you who are unsure what it means, Wikipedia describes search engine optimisation (optimization) as follows: “Search engine optimization (SEO) is the process of improving the......
  • 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......
  • A Web Hosting Business Can Make The Difference Between Achievement And Failure A world wide web hosting business needs to be capable to provide numerous innovative characteristics such as high-end hosting to leverage the very best in technological developments and ought to be able to provide diverse hosting methods. It should be possible for customers to take benefit of their own diverse......
en.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