Question

我正在尝试减少两个部分之间的垂直空间，但是，作为CSS的旋钮并没有帮助。使用表格（heh），她的间距消失了，但是用CSS我把头发拉了出来。

如果您复制/粘贴下面的代码，您会注意到“链接标题”和“www.123.com”之间的垂直间距与“www.123.com”和“更多文字”之间的垂直间距不同：

Link Heading...
www.123.com
Some more text...

这是瘦的

<head>
<style>
body{font:13px/27px Arial,sans-serif}
.link{color:#0000cc}
.heading{float:left;font-size:1.2em;margin:0;font-weight:normal}
.result{font-size:0.850em;line-height:1em;margin-bottom:20px}
.site,.info{float:left;font-size:1em}
.info{color:#222234}
</style>
</head>
<body>
    <a class=link href='http://www.123.com/'>
        <span class=heading>Link Heading...</span>
    </a>
    <br>
    <div class=result>
        <span class=site>www.123.com</span>
        <br>
        <span class=info>Some more text...</span>
    </div>

<br>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table> 
</body>

现在我知道答案将是明显的，但我再也看不到森林里的friggin css树了。

我很感激任何指示。

由于

Answer 1

使用CSS line-height:或否定margin:来更改垂直空间同时请确保您使用中断 ，height:也会更改垂直空间

Answer 2

这是因为表格行（）的高度为27像素。如果你将class设置为info并且样式.info {height：27px;颜色：＃222234}，它们与表中的高度相同。

<div class=result>
        <span class=info>www.123.com</span>
        <br>
        <span class=info>Some more text...</span>
    </div>

Answer 3

我建议您删除 代码并使用Block Element。

来自相关的Block formatting contexts：

在块格式化上下文中，框一个接一个地布局，垂直，从包含块的顶部开始。垂直的两个兄弟框之间的距离由'边距'决定属性。 a中相邻块级框之间的垂直边距阻止格式化上下文崩溃。

这意味着块元素（例如<div>和（等等）将自动在它们之后包含换行符，并且它们之间的空间可以被控制与margin。因此，我会将您的代码更改为以下内容：

<body>
    <div class="heading">
        <a class=link href='http://www.123.com/'>Link Heading...</a>
    </div>
    <div class=result>
        <p class=site>www.123.com</p>
        <p class=info>Some more text...</p>
    </div>

    <table border=0 cellspacing=0 cellpadding=0>
        <tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
        <tr><td>www.123.com</td></tr>
        <tr><td>Some more text...</td></tr>
    </table> 
</body>

其他一些挑剔：

在属性值（...）
不要使用表格进行布局（使用表格表格数据是可以的）
正确的缩进使您的代码更具可读性

Answer 4

嗨，这是一个简单的解决方案，通过使用“a”放置所有内容和相同的div并仅使用样式链接。

<head>
<style>
body{font:13px/27px Arial,sans-serif}

.result{
    font-size:0.850em;
    line-height:1.2em;
    margin-bottom:20px
    }

.result a
{
    float:left;
    font-size:1.2em;
    margin:0;
    font-weight:normal
}

.result a:link
{
    color:#0000cc;
    text-decoration: underline;
}
.result a:hover
{
    color: #1a0186;
    text-decoration: none;
}
</style>
</head>
<body>

    <div class=result>
        <a href='http://www.123.com/'>Link Heading...</a><br>
        www.123.com <br>
        Some more text...
    </div>

</body>

减少两段文本之间的垂直空间

4 个答案: