Thursday, March 21, 2013

Line Spacing Problem Solving HTML

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.

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>


<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.

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;" />:


No comments:

Post a Comment