html - 盒子上的空间太多 - HTML

Question

我创建了一个盒子 here .

但是顶部和底部的空间太大了。

请看这里的图片:

如何删除顶部和底部之间的额外间距:
1.标题和日期
2.按钮和文字
3.按钮和下方多余的间距

这是我的 HTML:

<div class="col-1-3"><img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt="" />
<h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3>
<h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4>
<a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank">
<button class="btn btn-block btn-primary">Watch Video</button>
</a>
</div>

这是我的 CSS:

h4 {
  text-align: center;
}
.col-1-3 {
  padding: 10px;
  width: 28%;
  float: left;
margin: 1%;
 border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.col-1-3 img {
  width: 100%;
}

.btn-block{
    display: block;
    width: 100%;
}
@media only screen and (max-width: 767px) {
  .col-1-3 {width: 44%;}

}
@media only screen and (max-width: 590px) {
  .col-1-3 {width: 94%;}

}

我只想有足够的空间，但这个间距太大了。

Answer 1

让div.col-1-3内所有元素的margin和padding为0

检查这个片段

h4 {
  text-align: center;
}
.col-1-3 * {
  padding: 0;
  margin: 0;
}
.col-1-3 {
  width: 28%;
  float: left;
  margin: 1%;
  border: 1px solid #dedede;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.col-1-3 img {
  width: 100%;
}
a {
  margin: 0;
}
h3 {
  margin: 0;
}
h4 {
  margin: 0;
}
.btn-block {
  display: block;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .col-1-3 {
    width: 44%;
  }
}
@media only screen and (max-width: 590px) {
  .col-1-3 {
    width: 94%;
  }
}

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt="">
  <h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3>
  <h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4>
  <p>
    <a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank">
      <button class="btn btn-block btn-primary">Watch Video</button>
    </a>
  </p>
</div>

希望对你有帮助