Тег `span` портит вертикальное выравнивание текста?

Когда я использую теги span в своем коде (для изменения фона текста на основе того, что является текстом), текст не выровнен по вертикали по сравнению с его фоном, когда я открываю свой код в браузере Android Chrome. Пусть это будет Code v.1 (JSFiddle), и вот результат:

результат с ‹span›

Однако когда я удаляю span теги, вертикальное выравнивание выглядит отлично. Пусть это будет Код версии 2 (JSFiddle), и вот результат:

результат без ‹span›

Не вводите себя в заблуждение окном предварительного просмотра JSFiddle: во-первых, обязательно увеличьте его (диспропорция выравнивания не видна на малых размерах окон), во-вторых - Код v.1 в JSFiddle перемещает текст в нижнюю часть своего фона, а в Android Chrome тот же код перемещает его в верх (см. Снимок экрана выше).

Чего я не ищу:

  • Решения JavaScript - не подходят в моем случае
  • ручная настройка тега padding - проблема явно в теге span , а не в заполнении

Вот код версии 1:

.part_of_speech {
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-weight: 700;
  border-radius: 0.3em;
  padding: 0.1em 0.2em 0.1em;
  font-size: calc(0.4em + 1.5vw);
}

.noun {
  background-color: #2196f3;
}

.adjective {
  background-color: #ff9800;
}

.verb {
  background-color: #4caf50;
}

.adverb {
  background-color: #f94432;
}

.conjunction {
  background-color: #a047f9;
}
<div class="part_of_speech">
  <span class="part_of_speech noun">NOUN</span>
  <span class="part_of_speech adjective">ADJ.</span>
  <span class="part_of_speech verb">VERB</span>
  <span class="part_of_speech adverb">ADV.</span>
  <span class="part_of_speech conjunction">CONJ.</span>
</div>

Вот код версии 2:

.part_of_speech {
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-weight: 700;
  border-radius: 0.3em;
  padding: 0.1em 0.2em 0.1em;
  font-size: calc(0.4em + 1.5vw);
  display: inline-block;
  /* NEW */
  background-color: #2196f3;
  /* MIGRATED FROM .partofspeech CLASSES BELOW */
}


/* .partofspeech CLASSES WERE DELETED DUE TO DELETION OF <SPAN> TAG */
<div class="part_of_speech">NOUN </div>


html css text-alignment text-align
person HexenSage    schedule 05.01.2020    source источник
comment
Может быть проблема с line-height или vertical-align исходного <span> стиля? Трудно отлаживать, не глядя на телефон Android, поскольку он отлично работает в моем настольном Chrome. PS: может быть, сделать сниппеты с помощью встроенного инструмента StackOverflow snippets, чтобы было легче до них добраться?   -  person Sheraff    schedule 05.01.2020
comment
Вы можете сделать внутренние пролеты display: inline-flex;, и я думаю, что это может решить проблему.   -  person Alon Eitan    schedule 05.01.2020
comment
Я добавил в ваш вопрос встроенные образцы исполняемого кода для ваших версий v1 и v2, и оба они кажутся мне одинаковыми.   -  person Tomalak    schedule 05.01.2020
comment
Шерафф, Алон Эйтан - не могли бы вы изменить мой Код v.1 (JSFiddle позволяет сохранить обновленный код), чтобы показать, что именно вы имеете в виду, поскольку я не уверен, что правильно вас понял. Спасибо!   -  person HexenSage    schedule 05.01.2020
comment
@Tomalak - это суть проблемы. Результат в Android выглядит противоположным, что я продемонстрировал на скриншотах.   -  person HexenSage    schedule 05.01.2020

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле решение было очень простым: возник конфликт между div присутствием в каждом span. Удаление div-component из spans и добавление селектора диапазона к общему div заставило код работать так, как предполагалось:

.part_of_speech {
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: calc(0.4em + 1.5vw);
}

.part_of_speech > span {
  padding: 0.1em 0.2em 0.1em;
  border-radius: 0.3em;
}

.noun {
  background-color: #2196f3;
}

.adjective {
  background-color: #ff9800;
}

.verb {
  background-color: #4caf50;
}

.adverb {
  background-color: #f94432;
}

.conjunction {
  background-color: #a047f9;
}

<div class="part_of_speech">
  <span class="noun">NOUN</span>
  <span class="adjective">ADJ.</span>
  <span class="verb">VERB</span>
  <span class="adverb">ADV.</span>
  <span class="conjunction">CONJ.</span>
</div>
person HexenSage    schedule 06.01.2020