vertical & horizontal spacing
Posted: Wed Mar 16, 2011 2:06 pmI am sure everyone has had problems with vertical and horizontal spacing when design Web pages. I have and still do when I am in a hurry
I truly hate the use of <br> which is so abused that it isnt funny or even the use of <p>
The following is a tip that I would like to share with you in the hopes that it will lessen any problems in web development.
A. vertical spacing
This technique I have used for years as it gives you virtually pixel control of your display one could say 'pixel precision'.
Historically, vertical spacing has been and still is incorrectly used that has an overall effect on the display on your screen. IMHO there is nothing worse than
visiting a web site and it is 'off key'.
Here is an example in using this technique from my CSS file that I currently use on my web site.
- Code: Select all
.c3a{line-height:10px}
.c3b{line-height:12px}
.c3c{line-height:14px}
.c3d{line-height:25px}
.c4a{line-height:27px}
.c4b{line-height:30px}
.c4c,.c5a{line-height:35px}
.c4d{line-height:40px}
How to use:
1. in html or (x)html
(ie.) for a 25px verticle space
<div class="c3d"> </div>
2. in html5 for a 30px verticle space
(ie.)
<article class="c4b"> </article>
B. horizontal spacing
I havent tested this out fully but it works well
- Code: Select all
.hz1{text-indent: 25px}
.hz2{text-indent:50px}
Therefore, <div class=".hz1"> </div> OR <article class=".hz2"> </article>
Hope this tip is helpful to anyone.
mapleleaf