【问题标题】:HTML line spacing is too big?HTML 行距太大?
【发布时间】:2014-06-10 23:55:11
【问题描述】:

我尝试将 line-height 更改为 0,这使得间距变得相当小,但每行之间仍有大约 1 cm....
当我在 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>

【问题讨论】:

  • line-height:0 表示文本在每个元素内 完全重叠(但是,两个连续的<p>s 根本不会重叠)。 Here's an example。发布一些示例 HTML 和任何相关的 CSS,以便我们知道您的文本为何表现不同
  • 您好,欢迎来到 Stack Overflow。获得代码帮助的最佳方法是发布您认为导致问题的代码。这将极大地帮助任何想要回答您的问题的人。
  • @trojansdestroy 我以前从未真正使用过 HTML,所以我真的不知道你在说什么......

标签: spacing css


【解决方案1】:

您的代码非常混乱。大多数标签都没有关闭。

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

(除了&lt;input&gt;&lt;img&gt;等自闭标签。

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-27
    • 1970-01-01
    • 2022-01-18
    相关资源
    最近更新 更多