0

I have a text make up of three <span> and I do not understand the rules applied when folding them:

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

If the width of the browser is reduced, the message folds and overlaps the upper parts.

How is the folding calculated? (what is taken into account to decide that the text will be placed at a specific distance?)

And therefore: what are the parameter(s) which influence the shift to the bottom of the next line of text? (in other words: what to change so that the second line starts lower)

WoJ
  • 27,165
  • 48
  • 180
  • 345

1 Answers1

1

Adjust the line-height. From the specification:

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thank you. Is there a particular reason why you applied `line-height:35px;` to the last section only? (or is it just because it is expected that this is the only one which will fold) – WoJ Oct 03 '18 at 10:53
  • @WoJ you can apply to any one :) it will be the same. OR you can also apply it to their container (the body in this case) it will also be the same. It's a bit tricky but for an easy explanation it's like we consider the max line-height to find the height of the line-box (it's more complex than this in reality) – Temani Afif Oct 03 '18 at 10:56
  • @WoJ you may check this for more in deepth explanation : https://stackoverflow.com/questions/52282391/understanding-css2-1-specification-regarding-height-on-inline-level-boxes/52284184#52284184 – Temani Afif Oct 03 '18 at 11:03