line-height - то работает, то нет. Или от перестановки места “сумма” оформления меняется?

334

21 декабря 2016, 03:27

Почему так line-height работает:

<div style="text-align:left; font:normal 9px 'Trebuchet MS'; line-height:10;"> 
   
  В лесу родилась елочка,<br> 
  В лесу она росла,<br> 
  Зимой и летом стройная,<br> 
  Зеленая была.<br> 
<br> 
  В лесу родилась елочка,<br> 
  В лесу она росла,<br> 
  Зимой и летом стройная,<br> 
  Зеленая была<br> 
<br> 
  Метель ей пела песенку:<br> 
  «Спи, елочка, бай-бай!»<br> 
  Мороз снежком укутывал:<br> 
  «Смотри, не замерзай!»<br> 
   
</div>

А вот так нет?

<div style="text-align:left; line-height:10; font:normal 9px 'Trebuchet MS';"> 
   
  В лесу родилась елочка,<br> 
  В лесу она росла,<br> 
  Зимой и летом стройная,<br> 
  Зеленая была.<br> 
<br> 
  В лесу родилась елочка,<br> 
  В лесу она росла,<br> 
  Зимой и летом стройная,<br> 
  Зеленая была<br> 
<br> 
  Метель ей пела песенку:<br> 
  «Спи, елочка, бай-бай!»<br> 
  Мороз снежком укутывал:<br> 
  «Смотри, не замерзай!»<br> 
   
</div>

Answer 1

Надо посмотреть, что делает может делать font:

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Соответственно, все свойства, которые он потенциально может содержать, при его использовании затираются. Эта участь постигает и line-height.

Можно сделать так (заодно немного семантичность увеличил):

<div style="text-align: left; font: normal 9px/10 'Trebuchet MS';"> 
   
<p> 
  В лесу родилась елочка,<br> 
  В лесу она росла,<br> 
  Зимой и летом стройная,<br> 
  Зеленая была. 
 
<p> 
  В лесу родилась елочка,<br> 
  В лесу она росла,<br> 
  Зимой и летом стройная,<br> 
  Зеленая была 
   
<p> 
  Метель ей пела песенку:<br> 
  «Спи, елочка, бай-бай!»<br> 
  Мороз снежком укутывал:<br> 
  «Смотри, не замерзай!» 
   
</div>