MODELO

CAJA
NOMBRE:
CLAUDIA ESMERALDA ARELLANO PÉREZ

MATERIA:
Programación Web

PROFESOR:
Walter Ramírez Romero

CARRERA:
Ingeniería En Sistemas Computacionales

TURNO:
Nocturno

GRADO:
ISC6C
Propiedad width:
Cuando aprendimos la diferencia entre los inline elements y
los block elements te expliqué que los del primer tipo ocupaban
sólo el tamaño de su contenido y los segundos toda la fila
independientemente del contenido.

Por lo tanto, con CSS tiene sentido que podamos modificar la

anchura de los elementos de tipo bloque, para que ocupen lo que
nosotros deseemos. Por ejemplo:

h1{

width: 100px;
}

view rawwidth.css hosted with   by GitHub

Pero, ¿qué pasa cuando a un inline element le asignamos

un width? Por ejemplo, veremos que es común asignar la
anchura a una imagen. En este caso ese elemento pasará a ser
de tipo bloque, pero en esta lección sólo quiero que entiendas
que todo elemento tiene una anchura, la cual le podemos
definir.

Propiedad padding:
Seguimos con el modelo de caja, ahora toca hablar de la
propiedad padding, que nos permitirá definir un espacio vacío
alrededor de un elemento. Retomando el ejemplo anterior, vamos
a declarar un espacio de 15px al rededor del encabezado h1.
Para ello haríamos:
 h1{

width: 100px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
}

view rawpadding.css hosted with   by GitHub

Es decir, para cada lado la caja le asignamos un espacio vacío

de 15px. Por supuesto, podrías elegir el valor que quieras para
cada uno. Y cuando definimos la misma medida para todos los
lados tan sólo es necesario escribir:

h1{

width: 100px;
padding: 15px;
}

view rawpadding-2.css hosted with   by GitHub

Ahora imagínate, que queremos 10px arriba, 5px a la

derecha, 15px abajo y 0px a la izquierda. En este caso
podríamos hacer como en el ejemplo inicial o utilizar la sintaxis de
una sola fila:

h1{

width: 100px;
padding: 10px 5px 15px 0;
}

view rawpadding-3.css hosted with   by GitHub

Por tanto, su sintaxis funciona en sentido horario:

padding: arriba derecha abajo izquierda

Asimismo, fíjate que el cero no va acompañado de unidad de

medida, eso es porque en CSS no es necesario indicar unidad
de medida cuando usamos el cero. El festival no acaba aquí, si
de da el caso, bastante común por cierto, de querer declarar un
mismo padding para arriba y abajo y otro para los laterales,
utilizamos la sintaxis:

h1{

width: 100px;
padding: 10px 5px;
}

view rawpadding-4.css hosted with   by GitHub

padding: arriba&abajo izquierda&derecha

Y por si no hubiera ya suficientes combinaciones, existe

una sintaxis para definir un padding superior, uno lateral común
y uno inferior:

h1{

width: 100px;
padding: 10px 5px 20px;
}

view rawpadding-5.css hosted with   by GitHub

padding: arriba izquierda&derecha abajo

Por último fíjate en el esquema. La zona vacía que se

corresponde al padding la he pintado del mismo verde que
el width. Esto es porque como veremos el padding comparte
el mismo color de fondo que el elemento en sí.
Propiedad border:
Si queremos asignar un borde a la “caja” tendremos que definir
tres propiedades: el estilo, la anchura y el color:

h1{

width: 100px;
padding: 15px;
border-style: solid;
border-width: 4px;
border-color: blue;
}

view rawborder.css hosted with   by GitHub

El estilo puede tomar distintos valores que encontrarás aquí. Si lo

deseas puedes declarar la propiedad border en una sola línea
con la siguiente sintaxis:

Finalmente, igual que pasaba con la

propiedad padding podemos definir un tipo de borde para cada
lado de la caja. Lo haremos especificando el estilo, anchura y
color de cada lado, por ejemplo, si queremos que el borde inferior
sea de color verde, lo especificaremos del siguiente modo:

h1{

width: 100px;
padding: 15px;
border: solid 4px blue;
border-bottom-color: green;
}
view rawborder-2.css hosted with   by GitHub

Propiedad margin:
Vamos ya a por la última propiedad: el margin. En CSS el
margen se aplica fuera de la caja, es decir, al contrario de lo
que pasaba con la propiedad padding, el margen no mantiene el
color de fondo del elemento, sino que siempre será
transparente.

Además, su sintaxis es idéntica a la del padding, pero

substituyéndolo por la palabra margin. Si a nuestro ejemplo le
declaramos un margen superior de 20px, escribiremos:

h1{

width: 100px;
padding: 15px;
border: solid 4px blue;
border-bottom-color: green;
margin-top: 20px;
}

view rawmargin.css hosted with   by GitHub

Para acabar con este tutorial es muy importante que aprendas a

no caer en la siguiente cáscara de plátano. Los márgenes
superiores e inferiores de dos elementos contiguos no se
suman sino que se solapan. Es decir, si tenemos dos elementos
uno encima del otro. Si al primero le asignamos un margen
inferior de 10px y al elemento de abajo le asignamos un margen
superior de 30px, éstos no se separarán en 40px, sino que la
separación será de 30px, ya que se solaparán y prevalecerá la
medida superior. En la siguiente imagen lo entenderás
fácilmente:

Y de esta forma completaríamos el modelo de caja en CSS.

Formado por el width, padding, border y margin de un
elemento HTML.