0

这应该很简单，但我不明白。我试图让三行（一种小字体，一种大字体，一种小字体）以单间距相互堆叠。相反，大字体行上方总是有一个双空格（对于 48-pt，它上方有一个 48-pt 行）。

我玩过边距、填充、高度、边框；除了最基本的必需品外，我已经剥离了所有东西，但我仍然无法让顶部和中间线很好地相互贴靠。

代码：

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

3 回答 3

0

尝试删除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;
}
于 2013-09-15T20:36:49.210 回答
0

让我们在这里保持简单。您正在寻找的是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元素的边距，这意味着它们可以根据需要堆叠。

于 2013-09-15T20:41:20.363 回答
0

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

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

http://jsfiddle.net/C4mFX/

于 2013-09-15T20:41:54.740 回答