CSS con sólo 3 valores

[xc70]

Estoy empezando en el desarrollo web y veo en varios css el uso de sólo 3 valores, por ejemplo:
padding: 0 0 10px;

Conozco la posibilidad de usar 2 en vez de 4, cuando las parejas arriba/abajo y derecha/izquierda usan valores idénticos.

¿A que equivalen esos 3 valores?

Muchas gracias

[kale86]

No he comprobado esto, pero creo men que si colocamos solo los tres valores para lo del relleno, practicamente funciona como si estuvieramos colocando los 4, excepto de que el lateral izquierdo toma su valor por defecto que sería 0

[furoya]

Mirar un tutorial antes de preguntar y responder güevadas, nunca ¿no?

http://www.w3.org/TR/CSS2/box.html#margin-properties

Elegí el margen, como pude elegir cualquiera. El punto es que los de más de un valor hay que estudiarlos uno por uno, porque no siempre van a tener la misma lógica. Como el caso de la función rgba() o la hsl(); los de 8 valores, como border-radius, llevan un separador adicional. Por eso insisto en que los estudien uno por uno para entenderlos.

[emprear]

Iniciado por kale86

No he comprobado esto, pero creo men que si colocamos solo los tres valores para lo del relleno, practicamente funciona como si estuvieramos colocando los 4, excepto de que el lateral izquierdo toma su valor por defecto que sería 0

Es loable tu actitud de querer participar, pero si solo se conjetura a partir de un "creo", se termina solo haciendo un aporte más a la confusión general.
Especificación Css 2.1 para borde( se aplica igualmente a padding)
Si hay sólo un valor, se aplica a todos los lados. Si hay dos valores, los bordes superior e
inferior son determinados por el primer valor y los bordes derecho e izquierdo son determinados
por el segundo. Si hay tres valores, el superior es definido por el primer valor, el izquierdo y el
derecho son definidos por el segundo, y el inferior es definido por el tercero. Si hay cuatro
valores, estos se aplican al superior, derecho, inferior e izquierdo, respectivamente

[xc70]

Muchas gracias a todos!

body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

Me quedó bien claro. Me guardé el enlace de la w3c de la versión en español para futuras revisiones: http://www.w3c.es/

Saludos y gracias.

[cristian_cena]

Esta "forma", que seguro la haz visto también en otras propiedades se conoce como "css shorthand" o "forma corta", googlealo.
Saludos

[xc70]

Gracias cristian_cena, desconocía el nombre de la versión shorthand. Aunque no conocía su nombre siempre que he podido la he usado.

Ya conocía reducir el color #CC00FF a #C0F o margin: 5px 0 0 5px; por margin: 5px 0; pero no cuando se trataba de 3 cifras porque hechaba a faltar la cuarta cifra, ahora ya se que en el caso de margin: 5px 20px 10px; se trata de que el número central es para izquierda y derecha.

Muchas gracias a todos.

[furoya]

Disculpen que la siga con algo que se supone ya está listo, pero no quisiera dejar algún cabo suelto.

Primero aprovecho a explicar la lógica de eso de los (hasta) 4 valores, para no tener que aprenderlos de memoria.

Los valores siempre son 4, y para la forma reducida, se toma de a pares empezando de la izquierda para rellenar lo que falte.

El orden es en sentido horario, empezando de arriba, a izquierda, a abajo y a derecha.
Si ponemos uno sólo, el navegador lo toma como el primero (arriba) y completa los otros con el mismo valor.
Si ponemos dos, los toma como arriba y como izquierda, y para mantener el centrado, toma el de arriba para abajo y el de la izquierda para poner a la derecha.
Si ponemos tres, son para arriba, izquierda y abajo, y para mantener el centrado horizontal porque falta el derecho, le da el mismo valor de la izquierda.
Si ponemos los cuatro el navegador no tiene que completar nada y escribo este párrafo de puro molesto que soy.


Bueno, ahora sí, el problema por el que vine está en la mención de los colores. Porque no son formas reducidas. En realidad son dos paletas. Aunque una contiene a la otra.

El formato hexadecimal provee 16 valores por cada "caracter" que usamos, lo que para un formato #RRGGBB (donde cada letra tiene un valor entre 0 y 15) nos da la cantidad máxima de

16 × 16 × 16 × 16 × 16 × 16 = 16777216

Esta paleta 16M contiene casi todos los colores posible en una página web. Digo "casi", porque existe un valor más para poner canal alfa, que no agrega nuevos tonos a los que ya hay, pero permite escribirlos de otra manera y con otra lógica.


El formato #RGB es una paleta reducida, pero no una forma reducida de escribir los valores de #RRGGBB, ya que siguiendo con la operación anterior

16 × 16 × 16 = 4096

no nos alcanza por mucho.

Evidentemente, la paleta 4K está incluída en la de dieciseis millones de colores, pero no son más (o son poco más) que cuatro mil; y no permiten escribirlos a todos.

Son dos sistemas, no dos formas (larga y corta) de escribir lo mismo.
Salvo donde coincidan .

[xc70]

Furoya estupenda clase
A decir verdad, no se ha quedado ningún cabo suelto.

Muchas gracias por tu aportación!
Saludos

[C2am]

Solo una consulta, que creo se trata de un pequeño error:

El orden es en sentido horario, empezando de arriba, a izquierda, a abajo y a derecha.

Me parece que "sentido horario" se contrapone con "arriba, izquierda, abajo, derecha".
O mi reloj va en sentido contrario .

Según mi reloj sería: arriba-derecha-abajo-izquierda.

Claro, también puede ser que el punto de vista que estoy tomando, como observador frente a la "caja o reloj" no sea la correcta. Siendo la correcta considerarme dentro de la caja-reloj mirando hacia afuera, con lo cual sería correcto arriba-izquierda-abajo-derecha
También podría ser que estuviera de cabeza con lo cual también podría disentir y poner primero abajo, que sería mi arriba, pero no tu arriba

Please ayudaaaaaaaaaaaa!!!

Saludos Furoya.
PD: el resto, muy buena explicación.

[furoya]

Lo que pasa es que yo tengo un sentido de la empatía muy desarrollado, y me pongo en el lugar del elemento al que le aplico el CSS.


· · ·


¡Y encima le erré en todos los párrafos! ¡No puedo ser tan inútil!

Al final es así, si no tengo tiempo de postear, no tengo que postear. Porque después no reviso y resulta que mando cualquiera.

Lástima que ya no se puede corregir. Y bueno, el que pase por este tema deberá leer al menos hasta tu post C2am. Lo que no está nada mal.

Gracias

[dontexplain]

Iniciado por kale86

No he comprobado esto, pero creo men que si colocamos solo los tres valores para lo del relleno, practicamente funciona como si estuvieramos colocando los 4, excepto de que el lateral izquierdo toma su valor por defecto que sería 0

Mira, aunque se agradece tu intento de colaborar, la mayoría de los que estamos aquí hacemos lo siguiente:

1) Se plantea una duda, 3 valores en una propiedad, etc.

2) Vamos a la consola de comandos, al editor de textos, al editor html, etc. o al punto 6.

3) Hacemos un test e insertamos 3 valores.

4) Abrimos/ejecutamos el archivo en el navegador y comprobamos que es lo que dice furoya o emprear.

5) Bravo! Ya sabemos qué función cumplen o desempeñan 3 valores en cierta propiedad css.

6) Alternativo: Buscamos en la especificación o en algún manual decente en Google y leemos qué pone para tener más o menos claro qué responder.

7) Damos una respuesta evitando los creos y acertando un poco más.

8) Todos somos felices, nosotros hemos aprendido algo nuevo o lo refrescamos si se nos olvidó y los usuarios subsiguientes que entren aquí tendrán información de primera mano.

Con tu método se logra

1) No aprendes nada ni demuestras que te interese

2) Confundes a los demás usuarios

3) Promueves la ignorancia en lugar de concretar hechos y verificar situaciones concretas.

Un saludo

[jomaruro]

Hola:

Iniciado por furoya

Lástima que ya no se puede corregir.

Puedes modificarlo editando el mensaje.

Saludos.

[xc70]

Iniciado por jomaruro

Hola:
Puedes modificarlo editando el mensaje.

Supongo que usurios nuevos o con pocos mensajes no tenemos la opción de editar los mensajes. Yo tampoco puedo.

Saludos

[furoya]

Iniciado por xc70

Supongo que usurios nuevos o con pocos mensajes no tenemos la opción de editar los mensajes. Yo tampoco puedo.

No, es cierto, una vez que postearon otro mensaje se pierde la posibilidad de editar los anteriores. A menos que pertenezcas al staff de FdW.

Creí que el tema terminaba ahí, y se lo comenté a jomaruro en privado, pero ya que lo mencionaste lo aclaro en público. No creo que se haya equivocado, lo que ocurre es que yo formé parte del grupo de Colaboradores, pero por pedido explícito eso no debía figurar debajo de mi nick. El inconveniente que apareció fue que de la Administración no me podían asegurar que desapareciera la mención al 'cargo' en forma definitiva, así que corté por lo sano y pedí la baja. Pero hay gente que quizá no se enteró porque no se habló más del asunto, y puede creer que si aún soy Colaborador, puedo editar mensajes aunque no sean el último.