Как повлиять на начало согнутой линии <span>?

Question

У меня есть текст, состоящий из трех <span>, и я не понимаю правила, применяемые при их складывании:

<span style="font-family: sans-serif; 
font-weight: normal; 
color: black; 
background-color: white; 
border-color: darkblue; 
border-style: solid; 
border-width: 5px; 
padding: 3px 3px 3px 7px;
text-align: center;
">
    ℹ
</span>
<span style="
font-family: sans-serif; 
font-weight: bold;
color: white; 
background-color: darkblue;
border-color: darkblue;
border-style: solid;
border-width: 5px;
padding: 3px 3px 3px 3px;
">
    This is some text
</span>
<span style="font-family: sans-serif; 
font-weight: normal; 
color: black; 
background-color: white; 
border-color: darkblue; 
border-style: solid; 
border-width: 5px; 
padding: 3px 5px 3px 5px;
">
    This is more text, a longer one which will eventually fold. Some more words.
</span>

Если ширина браузера уменьшается, сообщение складывается и перекрывает верхние части.

Как рассчитывается свертывание? (что принимается во внимание, чтобы решить, что текст будет размещен на определенном расстоянии?)

И, следовательно: Какие параметры влияют на сдвиг в нижней части следующей строки текста? (другими словами: что нужно изменить, чтобы вторая строка начиналась ниже)

Answer 1

Отрегулируйте line-height.Из спецификации :

Вертикальные отступы, границы и поля встроенного, незаменяемого поля начинаются сверху и снизу области содержимого и не имеют ничего общегос «высотой строки». Но только 'line-height' используется, когда вычисляет высоту поля строки .

span {
  font-family: sans-serif;
  border-color: darkblue;
  border-style: solid;
  border-width: 5px;
}

<span style=" font-weight: normal; 
color: black; 
background-color: white; 
padding: 3px 3px 3px 7px;
text-align: center;">
    ℹ
</span>
<span style="
font-weight: bold;
color: white; 
background-color: darkblue;
padding: 3px 3px 3px 3px;
">
    This is some text
</span>
<span style=" 
font-weight: normal; 
color: black; 
background-color: white; 
padding: 3px 5px 3px 5px;
line-height:35px;
">
    This is more text, a longer one which will eventually fold. Some more words.
</span>