CSS：在padding-top：0％之后甚至发生了一些空间事件

Question

我想删除div边框和文本之间的任何顶部空格，但是即使使用padding-top:0%;仍然有一些空格。

我使用以下html代码：

#article-container {
  float: left;
  width: 400px;
}

#article-summary {
  color: #5a5a5a;
  border: 1px solid red;
  width: 250px;
  padding-top: 0%;
  float: left;
}

#article-summary a {
  color: red;
  text-decoration: none;
}

<div class="article-container">
  <div id="article-summary">
    <p>Security vulnerabilities that put customers at risk have affected Asda's website for a couple of years, a security expert has revealed.</p>
    <p><span class="date">19 January 2016 | </span><a href="">Technology</a></p>
  </div>

</div>

结果是：

Answer 1

您可以在侧面文章中为p标签设置边距。如果只想要第一个p标签，请添加：first-child

#article-summary p:first-child{
  margin-top:0;
  /*margin-bottom:0;*/
}

#article-container {
  float: left;
  width: 400px;
}

#article-summary {
  color: #5a5a5a;
  border: 1px solid red;
  width: 250px;
  padding-top: 0%;
  float: left;
}

#article-summary p:first-child{
  margin-top:0;
  /*margin-bottom:0;*/
}

#article-summary a {
  color: red;
  text-decoration: none;
}

<div class="article-container">
  <div id="article-summary">
    <p>Security vulnerabilities that put customers at risk have affected Asda's website for a couple of years, a security expert has revealed.</p>
    <p><span class="date">19 January 2016 | </span><a href="">Technology</a></p>
  </div>

</div>