Parece que cuando la altura de la línea es mayor que 1.1 veces el tamaño de la fuente, el texto se centra verticalmente en la línea. ¿Se puede alinear verticalmente en su lugar?

En este ejemplo

p {
  background-color: pink;
  font-size: 20px;
  line-height: 40px
}

span {
  background-color: lightblue;
}
<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>

Quiero que el texto toque la parte superior del cuadro rosa. Todo el espacio rosa adicional estaría debajo del azul, en lugar de dividirse arriba y debajo de cada línea. La caja azul chocaría contra la parte superior de la rosa. No he encontrado vertical-align: top o agregando line-height al lapso para ayudar.

(Editado para mostrar que el texto puede ser muy largo).

css
3
JPM 15 jun. 2017 a las 05:53

3 respuestas

La mejor respuesta

Para mantener la altura de la línea, puede agregar display: inline-block; al tramo elemento.

p {
  background-color: pink;
  font-size: 20px;
  line-height: 40px
}

span {
  background-color: lightblue;
  display: inline-block;
}
<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>
1
j-printemps 15 jun. 2017 a las 07:59

Solución con relleno:

p {
  background-color: pink;
  font-size: 20px;
  padding: 0 0 20px 0;
  /* padding for top,right,bot,left */
}

span {
  background-color: lightblue;
}
<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>
1
Dalin Huang 15 jun. 2017 a las 03:26

¿Diferente de la respuesta de Daniel pero supongo que esto también cumple con sus requisitos?

p {
  background-color: pink;
  font-size: 20px;
  vertical-align: top;
  height: 40px;
}

span {
  background-color: lightblue;
}
<p>
  <span>Hello World</span> Hello World
</p>

Bueno, si su texto es multilínea, solo podría pensar en esta solución:

$("#fontsize-input").on("input",() => {
  $("p").css("font-size",$("#fontsize-input").val()+"px");
});
p {
  background-color: pink;
  font-size: 25px;
  line-height: 2em;
}

span {
  position: relative;
  top: calc(-0.45em + 1px);
}

.highlight {
  background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="10" max="40" id="fontsize-input"/>
<p>
  <span class="highlight">Hello World</span> <span>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World</span>
</p>
2
Richard Yan 16 jun. 2017 a las 01:54