Как настроить расстояние между двумя строками текста в div без использования позиции?

Question

У меня есть две строки текста, которые составляют заголовок и дату для небольшого небольшого блога, который я создаю.Я хочу отрегулировать вертикальное расстояние между двумя так, чтобы вторая строка текста была почти непосредственно под первой.В настоящее время существует огромный разрыв между ними.Какое стандартное исправление для этого?Я пытался настроить переменную позиции в прошлом, но это всегда делает изменение размера моего сайта сомнительным.Я бы предпочел не связываться с этим.Спасибо!

.StoriesTitle {
  font-size: 25px;
  margin-left: 23%;
  height: 10px;
}

.chinese {
  font-family: "Yu Gothic";
  font-weight: normal;
}

.StoriesDate {
  padding-bottom: 10pt;
  font-size: 12pt;
  margin-left: 1pt;
}

<section class="stories">
  <div class="StoriesTitle">
    <h2>Title Length</h2>
    <div class="StoriesDate">
      <h3>2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span</h3>
    </div>
  </div>
</section>

Answer 1

Попробуйте убрать поля из ваших элементов h2 и h3

.StoriesTitle {
  font-size: 25px;
  margin-left: 23%;
  height: 10px;
}

.chinese {
  font-family: "Yu Gothic";
  font-weight: normal;
}

.StoriesDate {
  padding-bottom: 10pt;
  font-size: 12pt;
  margin-left: 1pt;
}

.StoriesTitle > h2, .StoriesDate > h3 {
  margin: 0px;
}

<section class="stories">
  <div class="StoriesTitle">
    <h2>Title Length</h2>
    <div class="StoriesDate">
      <h3>
        2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span>
      </h3>
    </div>
  </div>
</section>

Answer 2

Просто удалите поле из тегов h2 и h3 и добавьте height: auto в свой класс StoriesTitle.

h2, h3 {
  margin: 0;
}

.stories {
  margin-top: 15px;
}

.StoriesTitle {
  font-size: 25px;
  margin-left: 23%;
  height: auto;
}

.chinese {
  font-family: "Yu Gothic";
  font-weight: normal;
}

.StoriesDate {
  padding-bottom: 10pt;
  font-size: 12pt;
  margin-left: 1pt;
}

<section class="stories">
  <div class="StoriesTitle">
    <h2>Title Length</h2>
    <div class="StoriesDate">
      <h3>2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span></h3>
    </div>
  </div>
</section>

Answer 3

.StoriesTitle h2 { 
  margin-bottom: 0;
}

.StoriesDate h3 { 
  margin-top: 0;
}