盒子上的空间太多 - 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

中的所有元素设置边距和填充0

检查此片段

＆＃13;

＆＃13;

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%;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望有所帮助

Answer 2

为h3，h4和btn-block创建其他CSS规则，您可以在其中定义margin-top和margin-bottom的设置。从所有值的0开始并增加值，直到您对结果满意为止。

评论后的补充：

1。）图片与p之间有一个空的h3标记 2.）你有一个CSS规则，所有p标签的底部边距为20px（在＃34的第278行; style.css＆＃34;）