Las propiedades de cuadro establecen el tamaño, el perímetro y la posición de los cuadros que representan a los elementos. En la sección 4 sobre el modelo de formato pueden verse ejemplos del uso de las propiedades de cuadro.
Las propiedades de margen establecen el margen de un elemento. La propiedad 'margin' establece el margen para los cuatro lados, mientras que las demás propiedades de margen sólo establecen sus lados respectivos.
Las propiedades de relleno describen cuánto espacio se inserta entre el borde y el contenido (p.ej., un texto o una imagen). La propiedad 'padding' establece el relleno para los cuatro lados, mientras que el resto de las propiedades de relleno establecen sólo sus lados respectivos.
Las propiedades de borde establecen los bordes de un elemento. Cada elemento tiene cuatro bordes, uno en cada lado, que están definidos por su anchura, su color y su estilo.
Las propiedades 'width' y 'height' establecen el tamaño del cuadro, y las propiedades 'float' y 'clear' pueden alterar la posición de los elementos.
Valor: <longitud> | <porcentaje> | auto
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el margen superior de un elemento:
H1 { margin-top: 2em }
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: <longitud> | <porcentaje> | auto
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el margen derecho de un elemento:
H1 { margin-right: 12.3% }
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: <longitud> | <porcentaje> | auto
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el margen inferior de un elemento:
H1 { margin-bottom: 3px }
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: <longitud> | <porcentaje> | auto
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el margen izquierdo de un elemento:
H1 { margin-left: 2em }
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: [ <longitud> | <porcentaje> | auto ]{1,4}
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
La propiedad 'margin' es una propiedad abreviada para establecer las propiedades 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left' en un mismo lugar de una hoja de estilo.
Si se especifican cuatro valores de longitud, se aplican a los márgenes superior, derecho, inferior e izquierdo respectivamente. Si sólo hay un valor, se aplica a todos los lados; si hay dos o tres valores, se toma para los valores que faltan los del lado opuesto.
BODY { margin: 2em } /* todos los márgenes puestos a 2em */
BODY { margin: 1em 2em } /* top y bottom = 1em, right y left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
La última regla de este ejemplo equivale al ejemplo siguiente:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copiado del lado opuesto (right) */
}
Se permiten valores negativos, pero puede haber limitaciones específicas de cada implementación.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el relleno superior de un elemento.
BLOCKQUOTE { padding-top: 0.3em }
Los valores de relleno no pueden ser negativos.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores de porcentaje: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el relleno derecho de un elemento.
BLOCKQUOTE { padding-right: 10px }
Los valores de relleno no pueden ser negativos.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el relleno inferior de un elemento.
BLOCKQUOTE { padding-bottom: 2em }
Los valores de relleno no pueden ser negativos.
Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
Esta propiedad establece el relleno izquierdo de un elemento.
BLOCKQUOTE { padding-left: 20% }
Los valores de relleno no pueden ser negativos.
Valor: [ <longitud> | <porcentaje> ]{1,4}
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: se refieren a la anchura del ascendiente en bloque más cercano
La propiedad 'padding' es una propiedad abreviada para establecer las propiedades 'padding-top', 'padding-right', 'padding-bottom' y 'padding-left' en un mismo lugar de una hoja de estilo.
Si se especifican cuatro valores, se aplican al relleno superior, derecho, inferior e izquierdo respectivamente. Si sólo hay un valor, se aplica a todos los lados; si hay dos o tres, se toman para los valores que faltan los del lado opuesto.
La superficie del área de relleno se establece con la propiedad 'background':
H1 {
background: white;
padding: 1em 2em;
}
En este ejemplo se establece en '1em' el relleno vertical ('padding-top' y 'padding-bottom'), y en '2em' el horizontal ('padding-right' y 'padding-left'). La unidad 'em' es relativa al tamaño de fuente del elemento: '1em' es igual al tamaño de la fuente en uso.
Los valores de relleno no pueden ser negativos