如何消除div之间的垂直空间

Question

我有通过 c# 以语法方式构建的 div。它们设置为 margin:0；但是，当它显示时，它们之间有间距。我需要它们相互紧靠，因为我可能有 20 行不同的图像，并且所有图像都需要显示在同一页面上。

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

这就是它现在在屏幕上的样子

我很困惑，看不出我这里有什么问题。

Answer 1

blurfus 指出了我的答案。我需要在 ss-scores 之后立即将 ss-description div 从 ss-desc 中移除并放入 ss-row 中，然后将其全部收紧。接下来，我将 ss-description div 中的边距更改为 0，并将 ss-scores 的高度设置为正确的高度。

Answer 2

首先，您需要确定所有高度的测量单位。

我也去掉了.ss-desc和.ss-names

的高度

重新组织 div，使 .ss-rows 成为每行项目的容器，并将 .ss-desc 移动到行内。

这是一项正在进行的工作（随着我发现更多，我将继续编辑答案）

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

如何消除div之间的垂直空间

How to eliminate vertical spaces between divs

css