---
Página principal

Propiedades de cuadro

Indice del tutorial
---

Estas son las propiedades que definen el modo en que se mostrará el cuadro que contiene a un elemento, ya sea este un párrafo, una tabla, imagen, ect.

margin-top
margin-botton
margin-right
margin-left
margin
padding-top
padding-right
padding-botton
padding-left
padding
border-top-width
border-right-width
border-botton-width
border-left-width
border-width
border-color
border-style
border-top
border-right
border-botton
border-left
border
width
height
float
clear

---

margin-top

Define el tamaño del margen superior de un elemento.

Sintaxis:

margin-top: <valor>

Detalles:

<valor> puede ser un porcentaje o un valor absoluto.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

margin-botton

Define el tamaño del margen inferior de un elemento.

Sintaxis:

margin-botton: <valor>

Detalles:

<valor> puede ser un porcentaje o un valor absoluto.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

margin-right

Define el tamaño del margen derecho de un elemento.

Sintaxis:

margin-right: <valor>

Detalles:

<valor> puede ser un porcentaje o un valor absoluto.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

margin-left

Define el tamaño del margen izquierdo de un elemento.

Sintaxis:

margin-left: <valor>

Detalles:

<valor> puede ser un porcentaje o un valor absoluto.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

margin

Permite definir todos los márgenes de un elemento.

Sintaxis:

margin: <valor>(1-4)

Detalles:

<valor> puede ser un porcentaje o un valor absoluto. Se pueden poner de uno a cuatro valores, separados por comas:

Un solo valor: Se aplica a todos los lados.
Dos valores: El primero se aplica arriba y abajo y el segundo a izquierda y derecha.
Tres valores: El primero arriba, el segundo a la derecha y a la izquierda y el tercero abajo.
Cuatro valores: El primero arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda.

Valor por defecto: Ninguno

Se aplica a todos los elementos

NO HEREDABLE

---

padding-top

Define el espacio entre el borde superior de un elemento y su contenido.

Sintaxis:

padding-top: <valor>

Detalles:

<valor> puede ser un valor absoluto o un porcentaje.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

padding-right

Define el espacio entre el borde derecho de un elemento y su contenido.

Sintaxis:

padding-right: <valor>

Detalles:

<valor> puede ser un valor absoluto o un porcentaje.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

padding-botton

Define el espacio entre el borde inferior de un elemento y su contenido.

Sintaxis:

padding-botton: <valor>

Detalles:

<valor> puede ser un valor absoluto o un porcentaje.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

padding-left

Define el espacio entre el borde izquierdo de un elemento y su contenido.

Sintaxis:

padding-left: <valor>

Detalles:

<valor> puede ser un valor absoluto o un porcentaje.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

padding

Define el espacio entre los bordes de un elemento y su contenido.

Sintaxis:

padding: <valor> (1-4)

Detalles:

<valor> puede ser un valor absoluto o un porcentaje. Se pueden poner de uno a cuatro valores, separados por comas:

Un solo valor: Se aplica a todos los lados.
Dos valores: El primero se aplica arriba y abajo y el segundo a izquierda y derecha.
Tres valores: El primero arriba, el segundo a la derecha y a la izquierda y el tercero abajo.
Cuatro valores: El primero arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda.

Valor por defecto: 0

Se aplica a todos los elementos

NO HEREDABLE

---

border-top-width

Indica el grosor del borde superior de un contenedor.

Sintaxis:

border-top-width: <valor>

Detalles:

<valor> puede ser un valor absoluto o uno de los siguientes:

thin: Borde fino.
medium: Borde medio.
thick: Borde grueso.

Valor por defecto: medium

Se aplica a todos los elementos

NO HEREDABLE

---

border-right-width

Indica el grosor del borde derecho de un contenedor.

Sintaxis:

border-right-width: <valor>

Detalles:

<valor> puede ser un valor absoluto o uno de los siguientes:

thin: Borde fino.
medium: Borde medio.
thick: Borde grueso.

Valor por defecto: medium

Se aplica a todos los elementos

NO HEREDABLE

---

border-botton-width

Indica el grosor del borde inferior de un contenedor.

Sintaxis:

border-botton-width: <valor>

Detalles:

<valor> puede ser un valor absoluto o uno de los siguientes:

thin: Borde fino.
medium: Borde medio.
thick: Borde grueso.

Valor por defecto: medium

Se aplica a todos los elementos

NO HEREDABLE

---

border-left-width

Indica el grosor del borde izquierdo de un contenedor.

Sintaxis:

border-left-width: <valor>

Detalles:

<valor> puede ser un valor absoluto o uno de los siguientes:

thin: Borde fino.
medium: Borde medio.
thick: Borde grueso.

Valor por defecto: medium

Se aplica a todos los elementos

NO HEREDABLE

---

border-width

Indica el grosor de los bordes de un contenedor.

Sintaxis:

border-width: <valor> (1-4)

Detalles:

<valor> puede ser un valor absoluto o uno de los siguientes:

thin: Borde fino.
medium: Borde medio.
thick: Borde grueso.

Se pueden poner de uno a cuatro valores, separados por comas:

Un solo valor: Se aplica a todos los lados.
Dos valores: El primero se aplica arriba y abajo y el segundo a izquierda y derecha.
Tres valores: El primero arriba, el segundo a la derecha y a la izquierda y el tercero abajo.
Cuatro valores: El primero arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda.

Valor por defecto: medium

Se aplica a todos los elementos

NO HEREDABLE

---

border-color

Define el color del borde de un contenedor.

Sintaxis:

border-color: <valor> (1-4)

Detalles:

<valor> es un valor de color. Se pueden poner de uno a cuatro valores, separados por comas:

Un solo valor: Se aplica a todos los lados.
Dos valores: El primero se aplica arriba y abajo y el segundo a izquierda y derecha.
Tres valores: El primero arriba, el segundo a la derecha y a la izquierda y el tercero abajo.
Cuatro valores: El primero arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda.

Valor por defecto: El valor de la propiedad color

Se aplica a todos los elementos

NO HEREDABLE

---

border-style

Marca el aspecto que tendrá el borde de un contenedor

Sintaxis:

border-style: <valor> (1-4)

Detalles:

<valor> puede ser uno de los siguientes:

none:
dotted:
dashed:
solid:
double:
groove:
ridge:
inset:
outset:

Se pueden poner de uno a cuatro valores, separados por comas:

Un solo valor: Se aplica a todos los lados.
Dos valores: El primero se aplica arriba y abajo y el segundo a izquierda y derecha.
Tres valores: El primero arriba, el segundo a la derecha y a la izquierda y el tercero abajo.
Cuatro valores: El primero arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda.

Valor por defecto: none

Se aplica a todos los elementos

NO HEREDABLE

---

border-top

Esta propiedad es, en realidad, la unión de "border-top-width", "border-style" y "border-color", permitiendo así modificar los valores de ancho, estilo y color del borde superior de un elemento.

Sintaxis:

border-top: <border-top-width> || <border-style> || <color>

Detalles:

Se puede poner una o más de las propiedades indicadas. Cada una de las opciones puede tomar los valores de la respectiva propiedad.

Valor por defecto: Ninguno

Se aplica a todos los elementos

NO HEREDABLE

---

border-right

Esta propiedad es, en realidad, la unión de "border-top-right", "border-style" y "border-color", permitiendo así modificar los valores de ancho, estilo y color del borde derecho de un elemento.

Sintaxis:

border-top: <border-right-width> || <border-style> || <color>

Detalles:

Se puede poner una o más de las propiedades indicadas. Cada una de las opciones puede tomar los valores de la respectiva propiedad.

Valor por defecto: Ninguno

Se aplica a todos los elementos

NO HEREDABLE

---

border-botton

Esta propiedad es, en realidad, la unión de "border-botton-width", "border-style" y "border-color", permitiendo así modificar los valores de ancho, estilo y color del borde inferior de un elemento.

Sintaxis:

border-botton: <border-botton-width> || <border-style> || <color>

Detalles:

Se puede poner una o más de las propiedades indicadas. Cada una de las opciones puede tomar los valores de la respectiva propiedad.

Valor por defecto: Ninguno

Se aplica a todos los elementos

NO HEREDABLE

---

border-left

Esta propiedad es, en realidad, la unión de "border-left-width", "border-style" y "border-color", permitiendo así modificar los valores de ancho, estilo y color del borde izquierdo de un elemento.

Sintaxis:

border-top: <border-left-width> || <border-style> || <color>

Detalles:

Se puede poner una o más de las propiedades indicadas. Cada una de las opciones puede tomar los valores de la respectiva propiedad.

Valor por defecto: Ninguno

Se aplica a todos los elementos

NO HEREDABLE

---

border

Esta propiedad es, en realidad, la unión de "border-width", "border-style" y "border-color", permitiendo así modificar los valores de ancho, estilo y color de los bordes de un elemento.

Sintaxis:

border: <border-width> || <border-style> || <color>

Detalles:

Se puede poner una o más de las propiedades indicadas. Cada una de las opciones puede tomar los valores de la respectiva propiedad.

Valor por defecto: Ninguno

Se aplica a todos los elementos

NO HEREDABLE

---

width

Especifica el ancho de un elemento.

Sintaxis:

whidt: <valor>

Detalles:

Valor puede ser una unidad absoluta, un porcentaje, o la palabra "auto", que dejará el valor por defecto del elemento (en el caso de una imagen, por ejemplo, su ancho original).

Valor por defecto: auto

Se aplica a los elementos de bloque y a algunos elementos especiales de HTML, que tienen un ancho intrínseco, como IMG, INPUT, TEXTAREA, SELECT y OBJECT.

NO HEREDABLE

---

height

Especifica la altura de un elemento.

Sintaxis:

height: <valor>

Detalles:

Valor puede ser una unidad absoluta o la palabra "auto", que dejará el valor por defecto del elemento (en el caso de una imagen, por ejemplo, su altura original).

Valor por defecto: auto

Se aplica a los elementos de bloque y a algunos elementos especiales de HTML, que tienen una altura intrínseca, como IMG, INPUT, TEXTAREA, SELECT y OBJECT.

NO HEREDABLE

---

float

Hace que el elemento se alinee a izquierda o derecha.

Sintaxis:

float: <valor>

Detalles:

Valor puede ser uno de estos tres:

left: Que alinea el elemento a la izquierda.
right: Que alinea el elemento a la derecha.
none: No alinea el elemento.

Valor por defecto: none

Se aplica a todos los elementos.

NO HEREDABLE

---

clear

Especifica si elemento al que se asigna la propiedad debe fluir en torno a otros elementos.

Sintaxis:

clear: <valor>

Detalles:

Valor puede ser uno de estos tres:

left: Permite que fluya a la izquierda de otros elementos.
right: Permite que fluya a la derecha de otros elementos.
none: No permite que fluya.
both: Permite que fluya a ambos lados de otros elementos.

Evidentemente, la posibilidad de fluir dependerá de la alineación del o los elementos en torno a los que se fluya.

Valor por defecto: none

Se aplica a todos los elementos.

NO HEREDABLE

---

Capitulo anteriorPrincipio de este capituloIndice del tutorialCapitulo siguiente

---

HTML 4.0 VálidoCSS Válido