如何删除css上的空格

Question

如何删除此空白->

​

​

我想让底部的两个图像向上移动，就像右边的那个。

我想我不应该使用col*，但还是不明白。

​

.portfolio {

}

.portfolio h4 {
  font-size: 28px;
  font-weight: 600;
  font-family: 'Lora', serif;
  margin-bottom: 20px;
}

.portfolio-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
<div class="row">
<div class="portfolio col-md-10-col-md-offset-1">
  <h4>Portfolio</h4>
  <div class="row">
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
      <h3><a href="#">Wongilang.xyz</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt=""></a>
      <h3><a href="#">Intanrahmadhani.web.id</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
      <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt=""></a>
      <h3><a href="#">Intanrahmadhani.web.id</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
      <h3><a href="#">Wongilang.xyz</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt=""></a>
      <h3><a href="#">Intanrahmadhani.web.id</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
      <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt=""></a>
      <h3><a href="#">Intanrahmadhani.web.id</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales.</p>
    </div>
  </div>
</div>
</div>
</div>

​

Answer 1

看起来你的图片有不同的高度，所以你可以看到第一张图片和第二张图片下面的空白区域是不一样的，最后两张图片紧跟在第四张图片(intanrahmadhani.web.id)之后。

您可以调整这些图像的大小/裁剪以确保高度一致，也可以对图像容器应用固定的高度。

​

.portfolio h4 {
  font-size: 28px;
  font-weight: 600;
  font-family: 'Lora', serif;
  margin-bottom: 20px;
}

.portfolio-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.portfolio-item > a:link,
.portfolio-item > a:visited {
  display: block;
  height: 300px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    
    <div class="portfolio">
      <h4>Portfolio</h4>
      <div class="row">
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x650" alt=""></a>
          <h3><a href="#">Wongilang.xyz</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x450" alt=""></a>
          <h3><a href="#">Intanrahmadhani.web.id</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x250" alt=""></a>
          <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x550" alt=""></a>
          <h3><a href="#">Intanrahmadhani.web.id</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x350" alt=""></a>
          <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x750" alt=""></a>
          <h3><a href="#">Wongilang.xyz</a></h3>
          <p>...</p>
        </div>
      </div>
    </div>

​