Question

这应该很简单，但我没有得到它。我试图让三条线（一条小字体，一条大字体，一条小字体）以单间距相互堆叠。相反，大字体线总是在它上面有一个双倍空间（对于48磅，它上面有一个48磅的线）。

我玩过边距，填充，高度，边框;我已经把所有东西都剥掉了，但是基本上都没有，我仍然无法让顶线和中线相互贴身。

代码：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 1<p></div>

<div style="
  font-size:48px; 
  height:48px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 2</p></div>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 3</p></font>


</html>

Answer 1

尝试删除标记中不需要的p标记：

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 1</div>

<div style="
  font-size:48px; 
  height:48px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 2</div>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 3</div>

JS小提琴： http://jsfiddle.net/TSLA7/

如果你绝对需要p标签，只需删除它们的填充和边距：

p{
    padding: 0px;
    margin: 0px;
}

Answer 2

让我们在这里保持简单。您要找的是line-height和margin。

http://jsfiddle.net/TSLA7/1/

所以，让我们删除并简化一下html。

<div class='stacked_lines'>
    <div>
        <p>Line 1</p>
    </div>

    <div style="font-size:48px;">
        <p>Line 2</p>
    </div>

    <div>
        <p>Line 3</p>
    </div>
</div>

在某些CSS中：

.stacked_lines div {
    line-height:1;
    font-size:16px;
}

.stacked_lines p {
    margin:0; 
}

因此，我们现在不必在div上指定高度 - 它们是字体大小的1倍（即与字体大小相同！）

我们已经删除了p元素的边距，这意味着它们会根据需要进行堆叠。

Answer 3

尝试使用line-height来消除blob之间的额外空间。

p { 
    line-height:0.7;
    margin:0
}

http://jsfiddle.net/C4mFX/

试图在HTML中紧密堆叠行

3 个答案: