Question

我对HTML / CSS很陌生，并且一直在练习。我一直在尝试找出如何删除图像下方和段落之前的空间。

我尝试了几件事：向左飘浮; 显示：块；垂直对齐：文本底部将边距减小到负px

我不确定我是将它们放在错误的位置还是我的代码有问题。

这是我需要帮助的部分的HTML代码：

body {
  background-color: #ffffff;
  margin: 0 auto;
}

h1,
h2 {
  color: #A4A400;
  font-family: Georgia;
  text-decoration: underline;
}

h1 {
  text-align: center;
  font-size: 22pt;
  font-weight: normal;
}

h2 {
  text-align: left;
  font-size: 18pt;
  font-weight: normal;
}

a {
  color: #A4A400;
}

#recipe {
  width: 1024px;
  margin: 0 auto;
}

.comments {
  background-color: #FFFFC8;
  margin: 0 auto;
  font-style: italic;
}

<div id="recipe">
  <header>
    <div class="image">
      <h1>Grandma's Lemon Meringue Pie</h1>
      <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/1/pie.jpg" alt="Pie" />
      <p>
        One 9-inch pie<br /> 30 Min - Prep time<br /> 10 Min - Cook time<br /> 40 Min - Total<br /> 8 Servings<br />
      </p>
    </div>
  </header>

我尝试了上述方法，但是间距没有变化。我试图显着降低边距，以查看它是否正常工作（我认为我使用了-20px），并且它消除了我想要的空间，但是图像不再保持对齐状态。

Answer 1

您试图在图像上设置边距，但是图像没有边距。边距位于它下面的p标签上。

如果添加：

p {
    margin: 0;
}

添加到CSS，然后您将删除不需要的边距。

别忘了在您的代码段未关闭的情况下也关闭了以“ image”类打开的div：）

通过如上所述将所有p的边距设置为0，将会影响您网站上所有p的边缘，因此请当心。您可能会更明确一些，最好只对div中具有“图像”类的所有p设置边距（图像也很通用，也许对div的命名也更具体）。

我个人将您的CSS更改为：

.recipe-detail p {
    margin: 0;
}

然后更改您的代码：

<div class="recipe-detail">
    <h1>Grandma's Lemon Meringue Pie</h1>
    <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/1/pie.jpg" alt="Pie" />
    <p>One 9-inch pie<br /> 30 Min - Prep time<br /> 10 Min - Cook time<br /> 40 Min - Total<br /> 8 Servings<br /></p>
</div>

如何消除图像下方和下一个文本之前的空白

1 个答案: