Duda Sobre Css - Diferencias entre %, em y nada

GaDo · #1 (**permalink**) 08/02/2011, 13:39

Por ejemplo.

line-height: 1;
line-height: 1em;
line-height: 1%;

Cual es la diferencia ?. No esta bien documentado por la web ya que la mayoria piensa que 1 = 1em

El del porcentaje no me interesa mucho.

Aca la explicación del manual que sigo pero no la cache mucho.

Cita:

The reason that the line-height for the elixirs heading is
too small is because every element in the elixirs <div>
inherits the line-height of 1em, or “1 times the font size of
the elixirs element”, which in this case is “small”, or about
12 pixels (depending on your browser). Remember, the
elixirs <div> is inheriting its font-size from the <body>
element, which we set to “small.”
What we really want is for all the elements in the elixirs
<div> to have a line-height that’s based not on the
font-size of the elixirs <div>, but rather the font-size of
each element itself. We want the <h2> heading to have
a line-height that is 1 times its font-size (which is 120% of
“small”), and the <p> should also have a line-height of 1
times its font-size (which is “small”). How can you do this?
Well, line-height is a bit special because you can use just a
number instead of a relative measure – like em or % – for
line-height. When you use just a number, you’re telling
each element in the elixirs <div> to have a line-height
of 1 times its own font-size, rather than the font-size of
the elixirs <div>. Give it a try; set the line-height of the
elixirs <div> to 1, and you’ll see that it fixes the heading.

Gracias

P.D: Y si alguien se apiada podría mirar mi tema de __get y __set ...

armandoweb · #2 (**permalink**) 08/02/2011, 13:52

Hola:

Revisa este articulo que esta muy bien explicado:

http://www.ignside.net/man/css/unidades.php

Saludos.

mariomon17 · #3 (**permalink**) 08/02/2011, 13:55

Antes nada decirte:
line-height: 1; esto no es nada, se necesita siempre una unidad
en todo caso seria:
line-height: 1px
y es una medida absoluta, no hay mas, 1px siempre es un 1px

Pero esto son medidas relativas osea se basan en algo para calcularse:
line-height: 1em;
line-height: 1%;

Ahora bien, yo tampoco tengo claro em, porcentaje pues simplemente el % de algo.
Si un div mide 100px y le pones width: 50% pues medira 50px.

kseso? · #4 (**permalink**) 08/02/2011, 15:53

Cita:

Iniciado por GaDo

Por ejemplo.

line-height: 1;
line-height: 1em;
line-height: 1%;
Cual es la diferencia ?.
Gracias

Cita:

Iniciado por mariomon17

Antes nada decirte:
line-height: 1; ~~esto no es nada, se necesita siempre una unidad~~
en todo caso seria:
line-height: 1px
y es una medida absoluta, no hay mas, 1px siempre es un 1px

line-height: 1; Significa una vez el tamaño de la fuente definida para ese elemento. Así, si la fuente computada es de 14px, el interlineado será 14px. Y si definimos 2 serían 28px.
line-height: 1em; el interlineado equivale al mismo valor del tamaño de la fuente computada para ese elemento.
line-height: X%; el valor de cómputo es el tamaño de la fuente computada y sobre ese valor se aplica el X%
Line-height: Xpx; pues el valor indicado. No hay cálculo, y el interlineado es independiente del tamaño del texto. Peligroso si el tamaño de la fuente está en valores relativos, pues no hay proporcianalidad entre el tamaño de la fuente y la distancia entre líneas.

Así que tendríamos una equivalencia: 1 (sin unidades) = 1em = 100%
Y siempre el valor de cálculo es el font-size computado.
Valor computado: el valor final resultante de calcular los distintos font-size que le afecten (por declaración expresa o herencia).

Ejemplo:
Agente de usuario: 1em establecido por un usuario en 20px
Body: font-size: 1.5em en el css (valor computado 30px)
div: font-size: .5em en el css (computado 15px)
p dentro de div: font-size: 1.2em en el css (computado 18px)

Entonces un line-height de 1/1em/100% sería:
para el body: 30px
para div: 15px
para p en div: 18px

Espero haberme sabido explicar después de tanto rollo.

mariomon17 · #5 (**permalink**) 08/02/2011, 16:38

mm.. siempre acabo aprendiendo algo nuevo contigo.
Me equivoque, lo siento

GaDo · #6 (**permalink**) 08/02/2011, 19:41

Cita:

Iniciado por kseso?

line-height: 1; Significa una vez el tamaño de la fuente definida para ese elemento. Así, si la fuente computada es de 14px, el interlineado será 14px. Y si definimos 2 serían 28px.
line-height: 1em; el interlineado equivale al mismo valor del tamaño de la fuente computada para ese elemento.
line-height: X%; el valor de cómputo es el tamaño de la fuente computada y sobre ese valor se aplica el X%
Line-height: Xpx; pues el valor indicado. No hay cálculo, y el interlineado es independiente del tamaño del texto. Peligroso si el tamaño de la fuente está en valores relativos, pues no hay proporcianalidad entre el tamaño de la fuente y la distancia entre líneas.

Así que tendríamos una equivalencia: 1 (sin unidades) = 1em = 100%
Y siempre el valor de cálculo es el font-size computado.
Valor computado: el valor final resultante de calcular los distintos font-size que le afecten (por declaración expresa o herencia).

Ejemplo:
Agente de usuario: 1em establecido por un usuario en 20px
Body: font-size: 1.5em en el css (valor computado 30px)
div: font-size: .5em en el css (computado 15px)
p dentro de div: font-size: 1.2em en el css (computado 18px)

Entonces un line-height de 1/1em/100% sería:
para el body: 30px
para div: 15px
para p en div: 18px

Espero haberme sabido explicar después de tanto rollo.

Muchas gracias por la respuesta. Ojala haya mas gente como tu en los foros de PHP.

Saludos y de nuevo gracias. me quedo clarisimo.

kseso? · #7 (**permalink**) 09/02/2011, 06:29

Cita:

Iniciado por mariomon17

mm.. siempre acabo aprendiendo algo nuevo contigo.
Me equivoque, ~~lo siento~~

Gracias, y no son necesarias las disculpas.
Es un error comprensible, pues es fácil extrapolar lo que sucede con otros valores (especialmente tamaños) y la ausencia de unidades y en base a ello pensar que en otras propiedades también ocurre.
Pero no es un caso único de line-heigth, piense en opacity, valores numéricos del color, más si se declara en rgba(0,0,0, .7), transformaciones de css3 (como scale), etc. No hay declaración expresa de unidades.

Cita:

Iniciado por GaDo

Muchas gracias por la respuesta. Ojala haya mas gente como tu en los foros de PHP.

Saludos y de nuevo gracias. me quedo clarisimo.

No hay de qué.
Sólo una pequeña observación: pese a que no visito apenas el foro de php, no dudo de que en él encontrará personas muy preparadas y generosas a la hora de compartir sus conocimientos.
Pero recuerde, no es el qué sino el cómo se plantea la consulta. Pero ésto ya es otra cuestión ajena a su consulta. Y ni es el momento ni el lugar adecuado para extendernos sobre el particular.

mariomon17 · #8 (**permalink**) 09/02/2011, 09:25

Si, pero no imagine que line-height pudiera no utilizar unidades.
Y compañero yo ando por los foros de PHP y seguro que hay gente que te puede ayudar.

Un saludo a ambos (y espero tu gacetilla en blog kseso

)

GaDo · #9 (**permalink**) 09/02/2011, 13:09

Ultima consulta.

Si defino en el body defino font-size: small; y hago un div <id=prueba>

quedaria

#prueba
line-height: 1;

Significa que la separación entre parrafos es del tamaño de la letra "small" ?. y 1em ?

Eso. espero se entienda

mariomon17 · #10 (**permalink**) 09/02/2011, 13:56

A mi tambien me ha surgido una duda matematica.
Si tengo: font-size: 18px definido en body.

Y luego en p escribo font-size: 1.3em
Para calcular el valor, se multiplica verdad?
osea que el tamaño seria (18·1.3) 23,4px ?

sanxuan · #11 (**permalink**) 09/02/2011, 14:24

GaDo, no es la separación entre párrafos, line-height determina la distancia entre líneas, o la altura de línea si lo prefieres. Tu div adoptaría un ancho de línea acorde a una fuente small.

mariomon17, creo que no es exactamente así. La medida em la define el navegador. En un determinado dispositivo, 1em pueden ser un determinado número de píxeles y en otro dispositivo corresponderse con otro tamaño. Si cambio en el navegador el tamaño de letra por defecto, la medida em debería cambiar, pero si cambio el tamaño de la letra en el HTML no.
Vas a obtener en p un texto de 1.3em y en el resto de la página un texto de 18px salvo que indiques otro valor.
Si quieres mantener un control rígido sobre las proporciones de cada texto puedes definir el tamaño de letra por defecto en píxeles y el resto de los tipos de letra en porcentaje. Será un porcentaje de ese tipo por defecto. O bien puedes usar siempre em con lo que los textos también mantienen la proporción.
En general se acepta la siguiente correspondencia:
16px = 1em = 100% = 12pt
pero como digo, es una relación que suele funcionar a priori en navegadores de equipos de sobremesa sin ninguna garantía de que la relación no se modifique por otros motivos en cualquier momento o en otros dispositivos diferentes.

kseso? · #12 (**permalink**) 09/02/2011, 15:02

Siento disentir en algún aspecto, sanxuan.
mariomon17, pruebe el siguiente código:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>css y font-size por Kseso?</title>
<style type="text/css">
* { margin:0; padding:0; position: relative;}
body {font-size:18px;}
p {font-size: 1.3em}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetuer dolor sed gravida id orci. Morbi dui cursus a id mattis urna Nullam nascetur libero nec. Phasellus Ut lacinia Quisque mi in orci interdum dolor accumsan sapien. Donec cursus id arcu dui dolor Vestibulum semper nibh ut Curabitur. Et pellentesque netus tincidunt montes et eros Nulla vel laoreet Sed. Non mauris auctor laoreet pede id feugiat ac odio.</p>
</body>
</html>

y cambia en valor de font-size en body.

Verás que el del párrafo también cambia su tamaño.
Em es el tamaño (altura) de la letra /M/ en la fuente definida para font-family.
Por la ley de la herencia (estilos en cascada), al encontrar en un elemento el tamaño definido en /em/ el agente de usuario se remonta hacia arriba* en busca de un valor para hacer el cálculo correspondiente.
Si en ningún momento lo encuentra, el punto final es el valor en px definido por el usuario en las preferencias de su navegador.
En el caso de ff:

Pero ese remonte cesa en el momento de encontrar un valor ya computado (calculado y pasado a px). Por lo que si en el body define un valor en px, ese será el que utilizará como referente.
Ese es un pequeño truco (incoherente) que utilizan algunos para controlar en tamaño de la tipografía, en detrimento de la accesibilidad.

* : realmente lo que ocurre, explicado de una forma sencilla y por lo tanto algo inexacta, es que el navegador calcula una sóla vez la equivalencia inicial 1em=Xpx y en base a ese valor realiza las conversiones posteriores descendientes cada vez que se encuentra un valor relativo.

GaDo:
Haga lo mismo que le sugiero a mariomon17.
En el código sustituya el valor de font-size por small, y vea qué ocurre.
Pero no le recomendaría definir ese valor para body, por la interpretación que hacen los navegadores de esos valores "subjetivos", así como los numéricos de 100 a 900 para el font-weight.

mariomon17 · #13 (**permalink**) 09/02/2011, 16:06

Gracias keseso, pero entonces cual es el calculo, una regla de tres?
1em --> 34px (definido en body, por poner algo)
3em --> X (osea: X es igual a 34x3)

Esto es asi?

sanxuan · #14 (**permalink**) 09/02/2011, 16:06

Haces bien en poner esa cara de asustado ante la barbaridad que he dicho kseso.
Yo mismo me he liado. Retiro de mi comentario las líneas que a continuación marco en rojo. Agradeceré cualquier otra corrección que pueda proceder.

GaDo, no es la separación entre párrafos, line-height determina la distancia entre líneas, o la altura de línea si lo prefieres. Tu div adoptaría un ancho de línea acorde a una fuente small.

mariomon17, creo que no es exactamente así. La medida em la define el navegador. En un determinado dispositivo, 1em pueden ser un determinado número de píxeles y en otro dispositivo corresponderse con otro tamaño. Si cambio en el navegador el tamaño de letra por defecto, la medida em debería cambiar, pero si cambio el tamaño de la letra en el HTML no.Vas a obtener en p un texto de 1.3em y en el resto de la página un texto de 18px salvo que indiques otro valor.
Si quieres mantener un control rígido sobre las proporciones de cada texto puedes definir el tamaño de letra por defecto en píxeles y el resto de los tipos de letra en porcentaje. Será un porcentaje de ese tipo por defecto. O bien puedes usar siempre em con lo que los textos también mantienen la proporción.
En general se acepta la siguiente correspondencia:
16px = 1em = 100% = 12pt
pero como digo, es una relación que suele funcionar a priori en navegadores de equipos de sobremesa sin ninguna garantía de que la relación no se modifique por otros motivos en cualquier momento o en otros dispositivos diferentes.

Aún no sé porqué pensé de otra forma. Cambiar el tamaño de letra de la etiqueta body hace cambiar todas las medidas referidas al texto declaradas en porcentajes o en em.
Gracias de nuevo por la corrección y por la explicación que nos has dado, que sin duda mejora bastante la mía.

kseso? · #15 (**permalink**) 10/02/2011, 10:16

Mariomon17:
En puridad y respetando el espíritu y finalidad del "em" sin pervertirlo, a quien use esa unidad (em) para definir tamaños no debe preocuparle el valor final en px en cada usuario o en cada agente de usuario(navegador, lector de texto...)*.

Al igual que ocurre al definir medidas (anchuras p.e.) en %, al definir valores para la fuente en "em", lo que se hace es establecer una relación de proporcionalidad entre los distintos elementos. Con independencia del valor computado resultante.

Otro ejemplo:
Supongamos la siguiente declaración de font-size para los elementos:
h1 --> 6em
h2 --> 4em
h3 --> 2em
p ---> 1em

Lo que estoy haciendo es crear una escala donde el texto de los párrafos definen la unidad. Y a partir de él, cada elemento en relevante superior dobla su tamaño para crear visualmente una escala proporcionada en función de la relevancia.
Y ahí termina el codificante.
Lo que ocurra con cada usuario y su equivalencia 1em=Xpx no tiene relevancia, pues es algo que sólo atañe a ese usuario y sus preferencias o necesidades visuales.

Si un usuario** necesita equiparar en 100px por em, la escala se mantiene: h1=600px/h2=400px/h3=200px/p=100px igual que para la persona que lo defina en 10px por em: h1=60/h2=40/h3=20/p=10

* Lógicamente debe ser consciente de ciertas situaciones que podrían darse y no declarar una anchura de 50px para contener un texto más o menos largo a un valor elevado de em.

** Posíblemente el usuario que necesita definir 1em=40px o más navegará con los estilos deshabilitados.