Как вы вывести пробел между строками после перевода строки?

Question

Как вы вывести пробел между строками после перевода строки?

У меня есть две строки, где я хочу, чтобы они находились прямо друг над другом, поэтому я ставлю разрыв между ними. Но после этого между линиями появляется огромный разрыв.

Как сохранить строки ("h8 adr" и "h8 no") разделенными, но между разделением не должно быть пробела?

Мой код:

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
}

<h1 class='adr'>

  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <br>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

0

html css word-spacing

Источник

user8476413 01 ноя '17 в 23:45

3 ответа

Другие вопросы по тегам html css word-spacing

user5374560 01 ноя '17 в 23:52 2017-11-01 23:52 · Answer 1 · 2017-11-01 23:52

Забери второй <br> и сделать .no иметь display: block:

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
  display: block;
}

<h1 class='adr'>

  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

user8645002 02 ноя '17 в 00:05 2017-11-02 00:05 · Answer 2 · 2017-11-02 00:05

Вы можете удалить разрыв строки и добавить этот адрес в тег абзаца. Таким образом, вам не нужно менять стили. Если этого недостаточно, изменение дисплея для блокировки и корректировка полей / отступов сделают свое дело. Надеюсь это поможет

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
}

<h1 class='adr'>
  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  
  <h8 class='no'>
    <p>Phone: 123-456 789 Fax: 123-456 789</p>
  </h8>
</h1>

user2341603 01 ноя '17 в 23:55 2017-11-01 23:55 · Answer 3 · 2017-11-01 23:55

Самый простой способ - просто повернуть .no в элемент уровня блока, применяя
display: block, Затем вы можете отрегулировать смещение, используя отрицательные поля:

.no {
  display: block;
  margin-top: -24px;
}

Точное отрицательное поле для использования зависит от того, гдеименно вы хотите разместить второй текст, но -24pxпоместит элемент точно в конец предыдущего элемента:

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding-left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
  display: block;
  margin-top: -24px;
}

<h1 class='adr'> A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <br>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

Также обратите внимание, что:

Ваш .adr имеет padding left вместо padding-left, Это исправлено в приведенном выше примере.
У вас также есть <br /> между двумя элементами, которые вы можете удалить, хотя учтите, что вам придется корректировать смещение, если вы это сделаете.
<h8> будет пользовательский элемент; стандартные заголовки HTML доходят только до h6,

Надеюсь это поможет!:)