Modelo de caja en html by jason cruz

Relleno

jasonomegaprime — 2021-02-19 00:03:07 UTC

CSS dene cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento.

Figura 4.8

jasonomegaprime — 2021-02-19 00:04:13 UTC

Aunque en principio puede parecer un comportamiento extraño,
la razón por la que se propuso este mecanismo de fusión automática de márgenes verticales es el de dar uniformidad a las páginas web habituales. En una página con varios párrafos, si no se
diera este comportamiento y se estableciera un determinado
margen a todos los párrafos, el primer párrafo no mostraría un
aspecto homogéneo respecto de los demás.

Figura 4.6

jasonomegaprime — 2021-02-19 00:04:50 UTC

Los márgenes verticales sólo se aplican a los elementos de bloque
e imágenes.
La imagen anterior muestra el resultado de aplicar los mismos
márgenes a varios enlaces (elementos en línea) y varios párrafos (elementos de bloque).

Figura 4.5

jasonomegaprime — 2021-02-19 00:05:17 UTC

Ejemplo de propiedad margin-left
Algunos diseñadores web utilizan la etiqueta

para
tabular los contenidos de los párrafos. Se trata de un error grave
porque HTML no debe utilizarse para controlar el aspecto de los
elementos. CSS es el único responsable de establecer el estilo de los elementos, por lo que en vez de utilizar la etiqueta
de HTML, debería utilizarse la propiedad margin-left
de CSS.

Margen

jasonomegaprime — 2021-02-19 00:05:42 UTC

Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes.

Altura

jasonomegaprime — 2021-02-19 00:06:17 UTC

Al igual que sucede con width, la propiedad height no admite
valores negativos. Si se indica un porcentaje, se toma como
referencia la altura del elemento padre. Si el elemento padre no
tiene una altura definida explícitamente, se asigna el valor auto a la altura.

Anchura

jasonomegaprime — 2021-02-19 00:08:26 UTC

La propiedad width no admite valores negativos y los valores en
porcentaje se calculan a partir de la anchura de su elemento padre.
El valor inherit indica que la anchura del elemento se hereda de su elemento padre.

Figura 4.3

jasonomegaprime — 2021-02-19 00:08:53 UTC

Representación tridimensional del box model de CSS
(Esquema utilizado con permiso de
http://www.hicksdesign.co.uk/boxmodel/)

Figura 4.2

jasonomegaprime — 2021-02-19 00:09:19 UTC

cajas que forman la página alistapart.com
Los navegadores crean y colocan las cajas de forma automática,
pero CSS permite modificar todas sus características. Cada una de
las cajas está formada por seis partes, tal y como muestra la
siguiente imagen

Figura 4.1

jasonomegaprime — 2021-02-19 00:10:12 UTC

Las cajas se crean automáticamente al de unir cada elemento.
HTML
Las cajas de las páginas no son visibles a simple vista porque
inicialmente no muestran ningún color de fondo ni ningún borde.