CSS: some space event after padding-top:0% even

Question

I want to delete any top space between the border of the div and the text but even using padding-top:0%; there is still some space.

I using this html code:

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

That results in:

p tags automatically have padding. you can just add a p{ margin-top:0; padding-top:0} to your css and it should take care of that — Kai Qing, Mar 06 '19 at 23:57
This is unrelated to your issue, but you're declaring styles on an `article-container` id, but it's a class in your markup. — hcs, Mar 06 '19 at 23:58

score 1 · Accepted Answer · answered Mar 07 '19 at 00:02

You can set margin for p tag in side article. Add :first-child if you want only first p tag

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

CSS: some space event after padding-top:0% even

1 Answers1