Dynamic Content CSS Styling not matching Static Content

Question

I'm trying to generate a list of dynamic items (jQuery) and the css of the dynamic content is not matching the static content, could someone point out what is wrong?

the first 3 items are static, each with a small space between, the next 3 are dynamic and Don't have any spacing between

Note: both are linked to the same CSS

---

Codepen Link

Static Implementation:

<div class="car-preview">
    <img src="https://www.google.com/photos/about/static/images/google.svg">
    <div class="car-details">
      <p>Holden Commodore Blah Blah
        <br><span>$10000</span></p>
      <ul>
        <li>10000km Driven</li>
        <li>1.5L 4Cyl Petrol Engine</li>
      </ul>
    </div>
  </div>

Dynamic Implementation:

$(document).ready(function() {
for(var i = 0; i < 3; i++){
$(".filter-content").html($(".filter-content").html() 
  + '<div class="car-preview">' 
    + '<img src="https://www.google.com/photos/about/static/images/google.svg">' 
    + '<div class="car-details">' 
      + '<p>Holden Commodore Blah Blah<br><span>$10000</span></p>' 
      + '<ul>' 
        + '<li>10000km Driven</li>' 
        + '<li>1.5L 4Cyl Petrol Engine</li>' 
      + '</ul>' 
    + '</div>' 
  + '</div>');
 }
});

---

I've been stuck on this for a while now,

Thanks in advance for any help.

Answer 1

This is because there is a white space between elements that added in html directly , you need to remove white space or added white space elements that added dynamically.

In following example I've removed white space between car-preview elements:

$(document).ready(function() {
	for(var i = 0; i < 3; i++){
    $(".filter-content").html($(".filter-content").html() 
      + '<div class="car-preview">' 
        + '<img src="https://www.google.com/photos/about/static/images/google.svg">' 
        + '<div class="car-details">' 
          + '<p>Holden Commodore Blah Blah<br><span>$10000</span></p>' 
          + '<ul>' 
            + '<li>10000km Driven</li>' 
            + '<li>1.5L 4Cyl Petrol Engine</li>' 
          + '</ul>' 
        + '</div>' 
      + '</div>'
    );
   }
});

* {
    font-family: Arial;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-content {
  width: 955px !important;
  background-color: white;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin: 0 auto 40px auto;
}

.main-content .content-area {
  text-align: center;
  padding: 0 10px 10px 10px;
  display: flow-root;
}

.car-preview::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background:linear-gradient(transparent 260px, white);
}

.car-preview {
  margin: 10px 0 0 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: inline-block;
  background-color: #f6f6f6;
  height: 300px;
  width: 300px;
  position: relative;
  box-sizing: content-box;
}

.car-preview img {
  height: 200px;
  width: 300px;
}

.car-details {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  height: 100px;
  padding: 5px;
  overflow: hidden;
}

.car-details p {
  color: #555;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  margin-bottom: 5px;
}

.car-details p span {
  color: rgba(0, 0, 0, 0.3);
}

.car-details ul {
  max-height: 65px;
}

.car-details ul li {
  list-style: none;
  color: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="main-content">
    <div class="filter-content content-area">
      <div class="car-preview">
        <img src="https://www.google.com/photos/about/static/images/google.svg">
        <div class="car-details">
          <p>Holden Commodore Blah Blah
            <br><span>$10000</span></p>
          <ul>
            <li>10000km Driven</li>
            <li>1.5L 4Cyl Petrol Engine</li>
          </ul>
        </div>
      </div><!--
    --><div class="car-preview">
        <img src="https://www.google.com/photos/about/static/images/google.svg">
        <div class="car-details">
          <p>Holden Commodore Blah Blah
            <br><span>$10000</span></p>
          <ul>
            <li>10000km Driven</li>
            <li>1.5L 4Cyl Petrol Engine</li>
          </ul>
        </div>
      </div><!--
    --><div class="car-preview">
        <img src="https://www.google.com/photos/about/static/images/google.svg">
        <div class="car-details">
          <p>Holden Commodore Blah Blah
            <br><span>$10000</span></p>
          <ul>
            <li>10000km Driven</li>
            <li>1.5L 4Cyl Petrol Engine</li>
          </ul>
        </div>
      </div>
      
    </div>
  </div>
</div>

For more detail read this