How to remove whitespace on css

Question

How to remove this whitespace ->

I want to make that two image in the bottom to move up like the one on the right.

I think I shouldn't use col-md-* but still dont get the idea.

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

Provide a working example, otherwise it will be impossible to help — Dekel, Oct 23 '16 at 02:21
you can use margin's with negative values like "margin-bottom:-22px" — Olaf Erlandsen, Oct 23 '16 at 03:00
Duplicate - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Oct 23 '16 at 09:23

score 0 · Answer 1 · answered Oct 23 '16 at 02:47

It seems like your images have different height so you can see the white space below the first image and second image aren't the same and the last 2 images appear right after the 4th image (intanrahmadhani.web.id).

You can either resize/crop these images to make sure the height is consistent or apply a fixed height to the image container.

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

yeah i know about that, but what i want is to make img to wrap up even with different height like here http://creative.ondrejsvestka.cz/ — khoirihendra, Oct 23 '16 at 03:01

How to remove whitespace on css

1 Answers1