2011-01-24 20 views
22

estoy jugando un poco con el Less Framework 3 y vi esta línea en el css:¿Cuál es el tercer valor en el relleno de CSS?

body { 
    padding: 60px 42px 0; 
    width: 396px; 
} 

¿qué padding: 0 hacer?

Esto no se ve como una taquigrafía css normal, y top-right-bottom parece extraño.

+7

@ Joel Etherton, de verdad, por lo que debe responder a esta y así superar a cualquier búsqueda de Google. Cuando está en SO, SO es muy preferido sobre Google. – jball

+0

@jball - En verdad, no estoy de acuerdo contigo. A menudo encuentro que las respuestas proporcionadas en SO no son ni más ni menos confiables que otras respuestas encontradas a través de varios medios de búsqueda. El hecho de que no esté en StackOverflow no significa que esté mal. El hecho de que esté en StackOverflow no significa que sea correcto. Y 5 minutos de RTFM habrían respondido a su pregunta. –

+3

@Joel Etherton, supongo que piensas [¿Cómo muevo la tortuga en el logotipo?] (Http://stackoverflow.com/questions/1003841/how-do-i-move-the-turtle-in-logo) es una mala pregunta para SO también? – jball

Respuesta

69

Las propiedades padding y margin especifican top right bottom left.
Si se omite left, estará predeterminado en right.

Por lo tanto, padding: a b c es equivalente a padding: a b c b.

Si también se omite bottom, estará predeterminado a top.
Por lo tanto, padding: a b es equivalente a padding: a b a b.

Si right es también omitido, el valor único se utiliza para los 4 lados.
Por lo tanto, padding: a es equivalente a padding: a a a a.

+2

¿No es "arriba a la derecha abajo a la izquierda"? – CAFxX

+0

@CAF: Ya lo arreglé. – SLaks

+0

gracias gracias, gracias :) – tabaluga

7

Cuando especifica tres valores, el segundo se usa implícitamente para el cuarto, es decir, relleno: 60px 42px 0 42px;

+0

gracias gracias, gracias :) – tabaluga

4

Hay tres versiones abreviadas al especificar los cuatro valores de grosor. Estos accesos directos también se aplican a propiedades similares, como margen, contorno y borde.

Especificación 1 Valor:

margin: 10px; 
/*same as*/ 
margin: 10px 10px 10px 10px; 

... significa el uso 10px para los 4 lados.

margin: 10px 15px; 
/*same as*/ 
margin: 10px 15px 10px 15px; 

... significa utilizar 10px para arriba y abajo y 15px para izquierda y derecha.

margin: 10px 15px 20px; 
/*same as*/ 
margin: 10px 15px 20px 15px; 

... significa usar 10px para arriba, 15px para izquierda y derecha, y 20px para abajo.

0

El mejor de todos explicar por w3school: - http://www.w3schools.com/css/css_padding.asp

lo tanto, aquí es cómo funciona:

Si la propiedad padding tiene cuatro valores:

padding: 25px 50px 75px 100px; 
    top padding is 25px 
    right padding is 50px 
    bottom padding is 75px 
    left padding is 100px 

Si la propiedad padding tiene tres valores:

padding: 25px 50px 75px; 
    top padding is 25px 
    right and left paddings are 50px 
    bottom padding is 75px 

If th propiedad e acolchado tiene dos valores:

padding: 25px 50px; 
    top and bottom paddings are 25px 
    right and left paddings are 50px 

Si la propiedad de relleno tiene un valor:

padding: 25px; 
    all four paddings are 25px 
Cuestiones relacionadas