| You might have felt frustrated about too much space between lines of text when using the <h> tags or <p> tag or <ul> or <ol> tags in HTML. Even if you're using a platform such as Joomla, Silverlight, or Wordpress, the line spacing problem persists—sometimes it gets worse. I searched for "adjust line space" and "reduce line space" and "control space between lines" in order to get some kind of answer. |
 |
After several hours of searching, I compiled an answer that has solved all my layout problems, and I am glad to share it with you.
I had such a hard time finding the answer to this that I actually put up my own page of advice in May of 2012. I got a very positive comment about it about a week later, but I think the more I spread the message of how to solve this pesky problem, the more nice-looking websites I'm going to see.
THE ANSWER TO LINE SPACE CONTROL
Every tag has a default margin, even div. Each of these margins behaves differently in different browsers, but still, this works for probably all.
So in your CSS area or in your in-line "style" attribute, you want to control how much of a margin you have around your tag content.
The most common line spacing problem that I was facing was with the title tag being too far spaced from the p tag.
I solved it this way:
<h1 style="margin-bottom:0px;">My Title</h1>
<p style="margin-top:0px;">My paragraph…</p>
or
<h1 style="margin:0px 0px 0px 0px;">My Title</h1>
<p style="margin:0px 0px 0px 0px;">My paragraph…</p>
When you use the 4-sided margin attribute, the numbers are describing the sides in a clockwise fashion. The first number is for top, then right, bottom, & finally left.
This even works on Wordpress, unless the parameters are overridden in the style.css file, which you can fix in the "Appearances/Edit" page.
TEXT LINE CRUNCHING
If you are doing some fancy font-family, and the lines are on top of each other, you can override the "line-height" attribute:
<p style"font-family: vivaldi, serif; line-height:100%;">Vivaldi Is Pretty</p>
Another problem I was having was when I had a png or gif file with a drop shadow. It wouldn't look properly aligned because there was invisible area to accomodate the shadow. I learned to work the margin like this to lower the image:
before:
after:This is what the image tag would look like:
<img src="http://myWebsite/images/myImage.png" style="margin-bottom: -9px;" width="60px" />
A negative value for the margins can come in handy lots of times.
Sometimes your <hr/> tag is too close to your text or other elements. So you want to make your tag look something like this:
before <hr/>:
after <hr style="margin:20px 5px 20px 5px;" />:
WELL, THAT'S ALL FOR NOW. SEE YA LAYTAH
