HTML行间距太大了?

时间:2013-07-27 23:15:44

标签: spacing css

我已经尝试将线高改为0,这使得间距相当小,但每条线之间仍然有一厘米左右.... 当我在htmledit(DOT)squarefree(DOT)com中编写HTML时,它看起来非常小 http://i.stack.imgur.com/NsBG5.png
但当我把它放在我的博客上并保存时,间距大大增大了...... http://i.stack.imgur.com/utZ6m.png

我输入的代码是
<p <span title="Made by [name]" style="background-color:black; border: double 10px #FF0000; text-align: center; font-size: 50px; font-family: arial; color: #FF0000; text-shadow: 5px 5px 4px #8A0808;">Text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px 0px; line-height: 0;">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0;">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="line-height: 0"><br /><span style="text-align: center; font-size: 15px; font-family: georgia; color: #FF0000; text-shadow: 0px 0px; line-height: 0"> © text</span style="line-height: 0" p>

1 个答案:

答案 0 :(得分:3)

你的代码非常混乱。大部分标签都没有关闭。

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

<input><img>等自动关闭代码除外。

如果将元素放在其他元素(称为“嵌套”)中,则必须正确关闭它们(如上所述),但与它们打开的顺序相反。

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

但在您的情况下不需要嵌套。查看符合您要求的this example。这是来自它的HTML:

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