Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Texto no tiene siempre el mismo alto

HTML - Texto no tiene siempre el mismo alto

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Texto no tiene siempre el mismo alto

Publicado por Iñigo (4 intervenciones) el 09/05/2022 12:29:02
Estoy haciendo una pequeña web en la que el fondo es una hoja con lineas perfectas de igual alto todas una respecto a otras, mi problema es que al meter el texto, unas veces me sale bien encajado entre las lineas pero en otras se me sale de la linea y se pone encima de la linea.

¿Se puede establecer que siempre haya el mismo espacio entre una linea y la siguiente para que salga todo el texto entre las lineas?

Adjunto imagen ya que una imagen vale más que 1000 palabras.
Pantallazo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Texto no tiene siempre el mismo alto

Publicado por Ivan (57 intervenciones) el 09/05/2022 19:55:39
Hola,

esto es un tema más bien de CSS y no de HTML pero te explico:

Supongo que el texto lo pones con un párrafo tipo <p>texto</p> y tal vez dentro del párrafo hagas saltos de linea <br> o utilices otro párrafo para hacer saltos de linea.

El tema es que a un párrafo le puedes definir un alto de linea y el texto también tiene su propio tamaño, pero además los párrafos, como elemento de bloque utilizan el modelo de caja para determinar el espacio que ocupan en la página, por tanto también puede tener unos márgenes externos, un borde y un relleno interno.

Como ves son muchos elementos a tener en cuenta ... Pero el truco de todo es hacer que una linea del párrafo coincida con la altura en píxeles de las lineas de tu imagen.

Para hacerlo quizas la forma más sencilla es aplicando tu propio estilo css a los párrafos y eliminar los estilos por defecto por ejemplo así:

1
2
3
4
5
6
7
8
9
<style>
p {
	font-size: 16px;
	line-height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
}
</style>

Pon este código en el <head> de tu web y ajusta el line-height hasta coincidir con tus lineas. Por defecto el tamaño del texto suele ser de 16px, al hacer el alto de linea en 32px añadimos un falso relleno de 8px por arriba y por abajo, de modo que no afecta si usas saltos de linea <br>.

Hay más formas de hacerlo, también puedes probar con rellenos y margenes.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar