HTML line spacing is too big?

Question

I've tried changing the line-height to 0, and that made the spacing considerably smaller, but there's still about one cm between each line....
When I wrote the HTML in htmledit(DOT)squarefree(DOT)com/ it looked very small https://i.stack.imgur.com/NsBG5.png
but when I put it on my blog and saved, the spacing was greatly enlarged...
https://i.stack.imgur.com/utZ6m.png

The code I was entering is
Text text text text text text © text

`line-height:0` means the text *within each element* completely overlaps (two consecutive `
`s, though, will not overlap at all). [Here's an example](http://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_line-height_pixel). Post some example HTML and any relevant CSS so we know why your text is behaving differently — Trojan, Jul 27 '13 at 23:36
Hello and welcome to Stack Overflow. The best way to get help with code is to post the piece of code that you believe is causing the problem. That will greatly help anyone who is wants to answer your question. — WolfLink, Jul 27 '13 at 23:38
@trojansdestroy I've never really worked with HTMLs before, so I don't really know what you're saying... — user2626586, Jul 28 '13 at 00:38

Trojan · Answer 1 · 2014-06-10T15:55:11.000

Your code is pretty messy. Most of the tags aren't closed.

<tag> gets closed with </tag>
<p>some text for a paragraph</p>
<span style="some style">some text to be displayed in that style</span>

(With the exception of self-closing tags such as <input> and <img>.

If you put elements inside of other elements (called "nesting"), you have to properly close them (like above), but in reverse of the order they were opened.

<p>this is a paragraph
    <span>this is a span inside the paragraph. it gets closed before the paragraph</span>
   the span is now closed, and the paragraph can be closed
</p>

But nesting isn't necessary in your case. See this example that does what you want. Here's the HTML from it:

<div style="background-color:black; border: double 10px #FF0000; text-align: center; font-size: 25px; font-family: arial; color: #FF0000; text-shadow: 5px 5px 4px #8A0808;">
    <!-- Text inside these special braces is called a comment. It isn't displayed on the page -->
    <!-- Beginning of <p> element -->
    <!-- Change the value of "line-height" here to space lines differently -->
    <p style="line-height:25px">
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    </p>
    <!-- End of <p> element -->

    <!-- The following "text" is in a separate <p> element, so it will be displayed by itself -->

    <p>
        text
    </p>
</div>

HTML line spacing is too big?

1 Answers1