的间距问题答案

【问题标题】：Spacing issues with 的间距问题
【发布时间】：2012-11-22 13:37:52
【问题描述】：

<div class="w-box-header" style="text-align: right;">
<div class="footer-text">
My Support Representative
</div>
<div>
<asp:Label ID="mcr_Name" runat="server" Text="Test Joe" /><br />
<asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" /><br />
<asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" /><br />
<asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" />
</div>
</div>

  导致在标签上方/下方放置大量空间。有什么办法可以覆盖这个间距，让它们在彼此下方？

看起来像这样：

测试乔

mailto@gmail.com

电话：(800) 555-5555 分机。 143

F: (555) 555-5555

如何强制这样：

测试乔
mailto@gmail.com
电话：(800) 555-5555 分机。 143
女：(555) 555-5555

【问题讨论】：

请把这个html编码的css放上
[如何更改中断标签的高度][1] [1]：stackoverflow.com/questions/1409649/…

标签： asp.net html css

【解决方案1】：

使用 div，并删除 BR

  <div class="w-box-header" style="text-align: right;">
        <div class="footer-text">
            My Engagex Support Representative
        </div>
        <div>
            <div>
                <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" />
           </div>
            <div>
                <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" />
            </div>
            <div>
                <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" />
            </div>
            <div>
                <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" />
            </div>
        </div>
    </div>

【讨论】：

这似乎是最简单的并且成功了。谢谢。

【解决方案2】：

首先，这可能是对<label>的误用。您没有标记任何内容，只是显示文本。

label 元素表示表单控件的标题 (w3)

其次，  应该用于重要的分行，而不是用于样式目的（请参阅here）。

对于 ASP.Net，我会使用更简单的结构：

<div><asp:Literal runat="server" text="Foo" /></div>
<div><asp:Literal runat="server" text="Bar" /></div>
<div><asp:Literal runat="server" text="Baz" /></div>

另请参阅：Marking up contacts using semantic HTML5 & microformats 了解更高级的技术。

【讨论】：

这是设计阶段，下一阶段我将使用从登录获得的信息更新标签。我想仍然可以使用文字。
标签通常应该与表单元素配对。如果您只需要显示文本（即使它与表单相关），则不需要标签（尽管不会发生任何不好的事情）。
请注意，asp:label 会增加视图状态的大小。
我已将它们切换为文字。每天都变得越来越好。 :)

【解决方案3】：

我会通过 CSS 为您的标签添加填充，将它们的显示更改为阻止，并完全删除 br 标签

【讨论】：

【解决方案4】：

一个简单的解决方案可能是删除  标签，而是使用 CSS 来按照您希望的方式设置这些行的样式。如果您想在单独的行上显示每条信息，您可以指定它们应在 CSS 中显示为“块”。

<div> 
    <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" style="display:block;" />
    <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" style="display:block;" />
    <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" style="display:block;" />
    <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" style="display:block;" />
</div>

为了减少 CSS 代码的冗长和重复，您可以将样式定义移动到标记中的 <head> 元素，如下所示：

<head>
    <style type="text/css">
        .block {
            display: block;
        }
    </style>
</head>
<body>
    <div> 
        <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" class="block" />
        <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" class="block" />
        <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" class="block" />
        <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" class="block" />
    </div>
</body>

我个人尽可能避免使用  标签。我发现使用 HTML 标记（如 <div>、  等）只提供文档的结构而不是样式要好得多。

在处理网页的样式（间距、字体、颜色等）时，我坚持使用 CSS 取得了更大的成功。

【讨论】：

【解决方案5】：

把它放在你的 CSS 中

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

【讨论】：

【解决方案6】：

是的，这个问题不难解决。您需要为
标签编写 CSS 样式以更改其默认设置（由用户的 Web 浏览器确定）。这两个属性可以影响
标签之间的距离。第一个称为边距，这在网络浏览器中有一个默认值。

这里是一些调整边距的代码：

<html>
<head>
...
<style type="text/css">
br {
margin-top: 5px;
margin-bottom: 5px;
}

</style>

或者，您可能需要更改填充

...
<style type="text/css">
br {
padding-top: 5px;
padding-bottom: 5px;
}
</style>

如果在将它们的值设置为“0px”后这些都不起作用并且间距仍然存在，那么问题不在于
标签。它可以是其他标签元素的填充或边距，例如 <img /> ,  或与您的
标签相邻的任何其他内容。

虽然未选择此答案作为此问题的解决方案，但以下是 html 和 CSS 用于样式化 Web 布局的属性图：

在大多数编程情况下，有很多方法可以得出相同的答案。只需确保您在整个网站上解决类似问题的方式保持一致即可。

【讨论】：

使用
标签更适合这样的结构布局，因为更改
标签的样式将改变所有 br 标签在整个页面上的显示方式，而不仅仅是在您引用的代码。在创建正确数量的 div 和创建太多 div 之间存在平衡。 Mate 的回答是 div 有点重，你仍然可以使用
标签，还可以给包装 div 一个 id 或 class。这将使您能够为给定的
标签编写复合样式。查看 www.w3schools.com 以查看有关 CSS 样式的参考。
感谢您的额外工作，我真的只是在寻找快速而肮脏的解决方案。我知道这有点 div 重，但它让我克服了一个障碍，然后是一项任务，让我可以在截止日期前完成这个项目中的下一个任务。 =(
@James 不用担心，感谢您的支持。我只是想帮助那些可能搜索此主题并解决您的问题的人。我使用堆栈溢出来找到很多我在其他参考资料中找不到的答案。