Question

我有一个<div>的内容，我使用<p>和<h4>，而我的样式表中没有为其中任何一个定义任何内容。两者之间存在很大差距。我希望他们能够在没有巨大差距的情况下相互辉映。我怎么做？ CSS？

    <div id="content">

    <h4>Asdf</h4><br />
    <p>asdfjkl</p>

    </div>

谢谢！

Answer 1

删除<br />。也就是说，将HTML更改为：

<div id="content"> 
  <h4>Asdf</h4>
  <p>asdfjkl</p> 
</div>

您可以在jsFiddle上看到这一点。

Answer 2

<p>标记有很大的余地。要使用CSS编辑边距，请为段落标记指定一个类名称，将其称为“边距”，然后使用CSS使用margin-top编辑边距大小。

    <style type="text/css">
p.margin
{
margin-top:1px;
}
</style>
        <div id="content">

    <h4>Asdf</h4><br />
    <p class="margin">asdfjkl</p>

    </div>

将px更改为您喜欢的任何内容。当你的数字越来越高时，H标签也有很大的余量，所以我建议你为h4做同样的技巧，给它提供相同的等级。

Answer 3

是的，CSS就是这样做的方法。如果你想在一个地方做到这一点你可以把它内联如下：

<h4 style='padding-bottom:0px; margin-bottom:0px;'>Asdf</h4>
<p style='padding-top:0px; margin-top:0px;'>asdfjkl</p>

你可以用h4做同样的事情来消除填充或边距。如果你想把它放在一个单独的CSS文件中：

h4 {
 margin-bottom:0px;
 padding-bottom:0px;
}

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

Answer 4

如果您仍然看到空格，可能是因为<h4>或<p>继承了其他地方的间距。您可以确定是否检查元素。（如何执行此操作取决于您使用的浏览器，但在Firefox中常见的方法是使用Firebug。）

要避免这种情况，请为<p>或<h4>标记指定一个特定的class（特别是如果您将在页面的其他位置使用该类，请使用类）并通过设置边距来定位间距/在课堂上填充。我将在下面使用<p>作为示例。

在您的HTML中：

<div id="content"> 
  <h4>Asdf</h4>
  <p class="nospace">asdfjkl</p> 
</div>

在你的CSS中：

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

我会分别对两个标签进行上述尝试，如果您认为两者都需要该类，则可以使用以下代码执行此操作：

<div id="content"> 
  <h4 class="nospace">Asdf</h4>
  <p class="nospace">asdfjkl</p> 
</div>

在你的CSS中：

p.nospace, h4.nospace {
  margin:0px;
  padding:0px;
}

简单的CSS字体问题

4 个答案: