Html 减少文本两部分之间的垂直间距_Html_Css

Html 减少文本两部分之间的垂直间距

html css

Html 减少文本两部分之间的垂直间距,html,css,Html,Css,我试图减少两个部分之间的垂直空间，但是，作为CSS的旋钮并没有帮助。使用表格（呵呵）的间距她不见了，但使用CSS，我把头发拔出来了如果您复制/粘贴下面的代码，您会注意到“链接标题”和“www.123.com”之间的垂直间距与“www.123.com”和“更多文本”之间的垂直间距不同：这是瘦子 <head> <style> body{font:13px/27px Arial,sans-serif} .link{color:#0000cc} .heading{float:

我试图减少两个部分之间的垂直空间，但是，作为CSS的旋钮并没有帮助。使用表格（呵呵）的间距她不见了，但使用CSS，我把头发拔出来了

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

这是瘦子

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


正文{font:13px/27px Arial，无衬线}
.link{color:#0000cc}
.标题{float:left；字体大小：1.2em；边距：0；字体重量：normal}
.result{font size:0.850em；行高：1em；页边距底部：20px}
.site、.info{float:left；字体大小：1em}
.info{color:#222234}


www.123.com


更多的文字。。。


www.123.com
更多的文字。。。

现在我知道答案很明显，但我再也看不见森林了

如果有人给我指点，我将不胜感激

谢谢

使用CSS

行高：

或负片

边距：

更改垂直空间

另外，如果使用的是分隔符，请确保其高度也会更改垂直空间，因为表格行（）的高度为27像素。如果在和style.info{height:27px；color:#222234}中都将class设置为info，则它们的高度将与表中的高度相同

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


www.123.com


更多的文字。。。

我建议去掉你的

标签，使用一个新的标签

有关方面：

在块格式上下文中，框会一个接一个地排列，垂直，从包含块的顶部开始。垂直的两个同级框之间的距离由“边距”确定财产。图形中相邻块级别框之间的垂直边距块格式上下文折叠

这意味着块元素，例如

和

（以及其他元素）将自动在它们之后包含换行符，并且它们之间的间距可以通过

边距

进行控制。因此，我将更改您的代码，使其看起来更像以下内容：

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


www.123.com
更多文本
www.123.com
更多的文字。。。

还有一些其他的细节：

在属性值周围使用引号（
```
…
```
）
不要将表格用于布局（可以将表格用于表格数据）
适当的缩进使代码更具可读性

您好，这里有一个简单的解决方案，将所有内容和相同的div放在一起，只使用“a”将样式应用于链接


正文{font:13px/27px Arial，无衬线}
.结果{
字号：0.850em；
线高：1.2米；
边际下限：20px
}
.结果a
{
浮动：左；
字体大小：1.2米；
保证金：0；
字体大小：正常
}
.结果a：链接
{
颜色：#0000cc；
文字装饰：下划线；
}
.结果a：悬停
{
颜色：#1a0186；
文字装饰：无；
}


www.123.com

更多的文字。。。

当然不同，您在表格中使用的样式并不相同，样式与此无关。从较大的文件中提取出来的浮点值就在那里。ie，这只是一个片段，使其更易于阅读/解析。就是这样！非常感谢：

.result{font size:0.850em；line height:1em；margin:-4px 0 20px 0px}

谢谢，这是一个非常干净的方法。谢谢Ryan-表格只是为了比较。事实上，整个片段都是复制/粘贴的，然后经过编辑/缩减后发布到这里。你关于Block元素的链接/评论正是我想要的——尽管@ggzone给出了一个可行的替代建议（即，我不必重新编码所有内容）。

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

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