How to eliminate vertical spaces between divs

Question

I have divs that are built pragrammatically via c#. They are set with margin:0; However, when it displays, there is spacing between them. I need them to be tight up against one another as I potentially can have 20 different lines of images and all need to be displayed on same page.

Here is the css

.Scoresheet {
  width: 100%;
}

.ss-area {
  width: 1000px;
  display: block;
}

.ss-area-description {
  border-radius: 15px;
  border: 1px solid #ccc;
}

.ss-description {
  margin-top: 2px;
  margin-bottom: -10px;
  float: right;
  width: 638px;
  height: 12px;
}

.ss-desc {
  position: relative;
  top: -10px;
  margin-top: -1px;
  margin-bottom: 0px;
  height: 12px;
  z-index: 10;
  clear: both;
}

.ss-desc:after {
  clear: both;
}

.ss-icon {
  width: 75px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
}

.ss-image {
  float: left;
  display: inline-block;
}

.ss-left {
  float: left;
  width: 213px;
  display: block;
}

.ss-right {
  float: left;
  display: block;
  width: 780px;
}

.ss-names {
  float: left;
  width: 140px;
  height: 37px !important;
  padding: 0px;
  margin: 0px;
}

.ss-row {
  display: block;
  position: relative;
  height: 39px;
  padding: 0px;
  top: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  z-index: 1;
  background: #dfdfdf;
  border: 1px solid #000;
}

.ss-row:after {
  clear: both;
}

.ss-scores {
  margin-bottom: 0px;
  float: right;
  width: 638px;
  background: #F9F;
}

.ss-section {
  width: 100%;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 24px;
  padding-bottom: 10px;
  border-left: 1px solid #666;
  color: #075BA8;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}

.description {
  border-radius: 25px;
  border: 1px solid #666;
  width: 200px;
}

.high-score-text {
  position: relative;
  float: right;
  margin-top: -5px;
  margin-bottom: 0px;
  height: 11px;
}

.low-score-text {
  position: relative;
  float: left;
  margin-top: -5px;
  margin-bottom: 0px;
  height: 11px;
}

#MentalAptitudes {
  display: block;
  width: 1000px;
  border-top: 1px solid #999;
  background: #ccc;
}

#PersonalityDimensions {
  display: block;
  width: 1000px;
  background: #aaa;
}

<section class="Scoresheet">
  <div id="MentalAptitudes">
    <div class="ss-left">
      <div class="ss-section">Mental Aptitudes</div>
      <div class="ss-icon"><img src="/Images/ReportGraphics/Icons/mental_aptitude_icon.png" alt=""></div>
      <div class="ss-area-description">
        <p>Lorem ipsum doler<br />Lorem ipsum doler<br />Lorem ipsum doler</p>
      </div>
      <br />
    </div>
    <div class="ss-right">
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/acuity.png" alt=""></div>
        <div class="ss-scores">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_1.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_2.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_3.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_4.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_c5.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_6.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_7.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_8.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_9.png" class="ss-img" alt="">
        </div>
      </div>
      <div class="ss-desc">
        <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
        <div class="ss-description">
          <div class="low-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/slow.png" alt="">
          </div>
          <div class="high-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/fast.png" alt="">
          </div>
        </div>
      </div>
      <div class="Clr"></div>
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/business.png" alt=""></div>
        <div class="ss-scores">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_1.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_2.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_3.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_4.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_5.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_c6.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_7.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_8.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_9.png" class="ss-img" alt="">
        </div>
      </div>
      <div class="ss-desc">
        <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
        <div class="ss-description">
          <div class="low-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/uninformed.png" alt="">
          </div>
          <div class="high-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/knowledgeable.png" alt="">
          </div>
        </div>
      </div>
      <div class="Clr"></div>
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/memory.png" alt=""></div>
        <div class="ss-scores">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_1.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_2.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_3.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_4.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_5.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_6.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_c7.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_8.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_9.png" class="ss-img" alt="">
        </div>
      </div>
      <div class="ss-desc">
        <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
        <div class="ss-description">
          <div class="low-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/unaware.png" alt="">
          </div>
          <div class="high-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/aware.png" alt="">
          </div>
        </div>
      </div>
      <div class="Clr"></div>
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/vocabulary.png" alt=""></div>
        <div class="ss-scores">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_1.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_2.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_3.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_4.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_c5.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_6.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_7.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_8.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_9.png" class="ss-img" alt="">
        </div>
      </div>
      <div class="ss-desc">
        <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
        <div class="ss-description">
          <div class="low-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/limited.png" alt="">
          </div>
          <div class="high-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/strong.png" alt="">
          </div>
        </div>
      </div>
      <div class="Clr"></div>
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/numerical.png" alt=""></div>
        <div class="ss-scores">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_1.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_2.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_3.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_c4.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_5.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_6.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_7.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_8.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_9.png" class="ss-img" alt="">
        </div>
      </div>
      <div class="ss-desc">
        <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
        <div class="ss-description">
          <div class="low-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/imprecise.png" alt="">
          </div>
          <div class="high-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/accurate.png" alt="">
          </div>
        </div>
      </div>
      <div class="Clr"></div>
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/tech_interest.png" alt=""></div>
        <div class="ss-scores">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_1.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_2.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_3.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_4.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_5.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_c6.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_7.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_8.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_9.png" class="ss-img" alt="">
        </div>
      </div>
      <div class="ss-desc">
        <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
        <div class="ss-description">
          <div class="low-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/indifferent.png" alt="">
          </div>
          <div class="high-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/interested.png" alt="">
          </div>
        </div>
      </div>
      <div class="Clr"></div>
    </div>
  </div>
  <div id="PersonalityDimensions">
    <div class="ss-left">
      <div class="ss-section">Personality Dimensions</div>
      <div class="ss-icon"><img src="/Images/ReportGraphics/Icons/personality_icon.png" alt=""></div>
      <div class="ss-area-description">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
      <br />
    </div>
    <div class="ss-right">
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/energy.png" alt=""></div>
        <div class="ss-scores">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_1.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_2.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_3.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_4.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_5.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_6.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_7.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_8.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_c9.png" class="ss-img" alt="">
        </div>
      </div>
      <div class="ss-desc">
        <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
        <div class="ss-description">
          <div class="low-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/restless.png" alt="">
          </div>
          <div class="high-score-text">
            <img src="/Images/ReportGraphics/Scoresheet/Desc/calm.png" alt="">
          </div>
        </div>
      </div>
      <div class="Clr"></div>
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/flexibility.png" alt=""></div>
        <div class="ss-scores">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_1.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_2.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_3.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_4.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_5.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_c6.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_7.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_8.png" class="ss-img" alt="">
          <img src="/Images/ReportGraphics/Scoresheet/Scores/gray_9.png" class="ss-img" alt="">
        </div>
        <div class="Clr"></div>
      </div>
    </div>
  </div>
</section>

This is what it looks like right now on the screen

I'm stumped and cannot see what I have wrong here.

Which divs are you trying to remove the space between? The outer grey ones or the smaller boxes in each row? — omid, May 27 '22 at 16:42
There's a similar question here https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements — Pepe N O, May 27 '22 at 16:44
Please include an [mre] to your question - the code provided does not look seem to illustrate the issue correctly — blurfus, May 27 '22 at 17:21
@Omid there should be NO spacing between each line I put backgrounds in to try to help me see what is wrong Mental Acuity line should have no white spacing between it and the following line for Business Terms. which should also have no spacwe between it and Memory Recall — Miranda, May 27 '22 at 18:27
@blurfus I did include the code being used if that is not a reproducible example then I do not know what is. — Miranda, May 27 '22 at 18:28
The code provided does not render like the image provided - so instead of us troubleshooting the difference, it's best to provide the code that produced the results in the image in the first page (in other words, the code provided does not reproduce the issue you are trying to fix) — blurfus, May 27 '22 at 18:31
@pepe I am not trying to remove horizontal spacing as in that example (actually there is none as the images used have some pixels on left abnd right sides). I am trying to remove vertical spacing between each line — Miranda, May 27 '22 at 18:31
@blurfus that is the problem! that is the code from that image. — Miranda, May 27 '22 at 18:32
Perhaps something else is missing? (i.e. other css or other code?) - the code rendered does not replicate the image (as it can be seen) — blurfus, May 27 '22 at 18:36
@blurfus I only have the single stylesheet used. However, there are many more classes than what i showed in the example. This displays just a single printed page of a report that can include as many as 30 or more pages. I am going to remove all of the other classes on the page that aren't needed for this part and see if one of those classes is interfering with this. — Miranda, May 27 '22 at 18:50
There is a class called `.ss-desc {...}` that seems to be controlling the height attribute (12px) and because it's in between `.row` elements, it's creating the gap. I will try replicate the issue and get back to you. Can you try it on your end? — blurfus, May 27 '22 at 18:57
I just noticed that a lot of your `height` attributes have a number but no unit of measure (i.e. a `height: 10` -> 10 what? 10 pixels? 10em? 10rm? unless the number is zero, you need to include your unit of measure too — blurfus, May 27 '22 at 20:33

score 0 · Accepted Answer · answered May 27 '22 at 20:32

blurfus pointed me to the answer. I needed to remove the ss-description div out of the ss-desc and into the ss-row right after ss-scores then it tightens it all up. Next I changed the margins in the ss-description div to be 0 and set the height of ss-scores to correct height.

blurfus · Answer 2 · 2022-05-27T20:41:36.820

For starters, you need to fix your units of measure for all the heights.

I also removed the height of .ss-desc and .ss-names

Re organized the divs so the .ss-rows are containers for each row of items and moved the .ss-desc inside rows.

This is a work in progress (as I find more, I will continue editing the answer)

.Scoresheet {
  width: 100%;
}

.ss-area {
  width: 1000px;
  display: block;
}

.ss-area-description {
  border-radius: 15px;
  border: 1px solid #ccc;
}

.ss-description {
  margin-top: 2px;
  margin-bottom: -10px;
  float: right;
  width: 638px;
  height: 12px;
}

.ss-desc {
  position: relative;
  top: -10px;
  margin-top: -1px;
  margin-bottom: 0;
  /*height: 12px;*/
  z-index: 10;
  clear: both;
}

.ss-desc:after {
  clear: both;
}

.ss-icon {
  width: 75px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
}

.ss-image {
  float: left;
  display: inline-block;
}

.ss-left {
  float: left;
  width: 213px;
  display: block;
}

.ss-right {
  float: left;
  display: block;
  width: 780px;
}

.ss-names {
  float: left;
  width: 140px;
  /*height: 37px !important;*/
  padding: 0;
  margin: 0;
}

.ss-row {
  display: block;
  position: relative;
  height: 39px;
  padding: 0;
  top: 0;
  margin-top: 0;
  margin-bottom: 0;
  z-index: 1;
  background: #dfdfdf;
  border: 1px solid #000;
}

.ss-row:after {
  clear: both;
}

.ss-scores {
  margin-bottom: 0;
  float: right;
  width: 638px;
  background: #F9F;
}

.ss-section {
  width: 100%;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 24px;
  padding-bottom: 10px;
  border-left: 1px solid #666;
  color: #075BA8;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}

.description {
  border-radius: 25px;
  border: 1px solid #666;
  width: 200px;
}

.high-score-text {
  position: relative;
  float: right;
  margin-top: -5px;
  margin-bottom: 0;
  height: 11px;
}

.low-score-text {
  position: relative;
  float: left;
  margin-top: -5px;
  margin-bottom: 0;
  height: 11px;
}

#MentalAptitudes {
  display: block;
  width: 1000px;
  border-top: 1px solid #999;
  background: #ccc;
}

#PersonalityDimensions {
  display: block;
  width: 1000px;
  background: #aaa;
}

<section class="Scoresheet">
  <div id="MentalAptitudes">
    <div class="ss-left">
      <div class="ss-section">Mental Aptitudes</div>
      <div class="ss-icon"><img src="/Images/ReportGraphics/Icons/mental_aptitude_icon.png" alt=""></div>
      <div class="ss-area-description">
        <p>Lorem ipsum doler<br />Lorem ipsum doler<br />Lorem ipsum doler</p>
      </div>
    </div>
    <div class="ss-right">
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/acuity.png" alt=""></div>
        <div class="ss-scores">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
        </div>
        <div class="ss-desc">
          <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
          <div class="ss-description">
            <div class="low-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/slow.png" alt="">
            </div>
            <div class="high-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/fast.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/business.png" alt=""></div>
        <div class="ss-scores">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
        </div>
        <div class="ss-desc">
          <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
          <div class="ss-description">
            <div class="low-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/uninformed.png" alt="">
            </div>
            <div class="high-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/knowledgeable.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/memory.png" alt=""></div>
        <div class="ss-scores">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
        </div>
        <div class="ss-desc">
          <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
          <div class="ss-description">
            <div class="low-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/unaware.png" alt="">
            </div>
            <div class="high-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/aware.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/vocabulary.png" alt=""></div>
        <div class="ss-scores">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
        </div>
        <div class="ss-desc">
          <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
          <div class="ss-description">
            <div class="low-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/limited.png" alt="">
            </div>
            <div class="high-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/strong.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/numerical.png" alt=""></div>
        <div class="ss-scores">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
        </div>
        <div class="ss-desc">
          <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
          <div class="ss-description">
            <div class="low-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/imprecise.png" alt="">
            </div>
            <div class="high-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/accurate.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/tech_interest.png" alt=""></div>
        <div class="ss-scores">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
        </div>
        <div class="ss-desc">
          <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
          <div class="ss-description">
            <div class="low-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/indifferent.png" alt="">
            </div>
            <div class="high-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/interested.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PersonalityDimensions">
    <div class="ss-left">
      <div class="ss-section">Personality Dimensions</div>
      <div class="ss-icon"><img src="/Images/ReportGraphics/Icons/personality_icon.png" alt=""></div>
      <div class="ss-area-description">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
    </div>
    <div class="ss-right">
      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/energy.png" alt=""></div>
        <div class="ss-scores">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
        </div>
        <div class="ss-desc">
          <div class="ss-names"><img src="/Images/ReportGraphics/spacer.gif" alt=""></div>
          <div class="ss-description">
            <div class="low-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/restless.png" alt="">
            </div>
            <div class="high-score-text">
              <img src="/Images/ReportGraphics/Scoresheet/Desc/calm.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="ss-row">
        <div class="ss-names"><img src="/Images/ReportGraphics/Scoresheet/Text/flexibility.png" alt=""></div>
        <div class="ss-scores">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
          <img src="https://place-hold.it/65x25/999" class="ss-img" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

How to eliminate vertical spaces between divs

2 Answers2