vertical & horizontal spacing

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

vertical & horizontal spacing

Postby mapleleaf » Wed Mar 16, 2011 2:06 pm


I 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 :D

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">&nbsp;</div>

2. in html5 for a 30px verticle space
(ie.)
<article class="c4b">&nbsp;</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">&nbsp;</div> OR <article class=".hz2">&nbsp;</article>

Hope this tip is helpful to anyone.


mapleleaf


User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 1 guest

cron