Scribd
Cargar
13 vistas11 páginas

Modelo de Cajas en CSS

El modelo de cajas (box model) describe cada elemento como una secuencia de cajas anidadas. Cada caja tiene contenido, relleno, borde y margen. El contenido define el alto y ancho de la caja, el relleno es el espacio entre el contenido y el borde, el borde es una línea alrededor del relleno, y la margen es el espacio entre cajas. La propiedad display controla cómo se visualiza un elemento como bloque, en línea o en línea-bloque.

Cargado por

Luis Rizzo
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
13 vistas11 páginas

Modelo de Cajas en CSS

El modelo de cajas (box model) describe cada elemento como una secuencia de cajas anidadas. Cada caja tiene contenido, relleno, borde y margen. El contenido define el alto y ancho de la caja, el relleno es el espacio entre el contenido y el borde, el borde es una línea alrededor del relleno, y la margen es el espacio entre cajas. La propiedad display controla cómo se visualiza un elemento como bloque, en línea o en línea-bloque.

Cargado por

Luis Rizzo
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Modelo de Cajas o

Box Model
El modelo “BOX” en CSS describe cada
elemento como una secuencia de cajas
una dentro de la otra.
Content
Height: div {
height: 200px;
Es el alto de una caja }

Width:
div {
Es el ancho de una caja width: 200px;
}
1 Content

2 Padding

3 Border
4 Margin
Content: El cuadro que
posee el contenido.
Padding: espacio entre el
contenido y el límite de la
caja.
Border: el borde es el
cuadro que incluye el
relleno y agrega un área
alrededor del relleno

Margin: Contiene a todos


los elementos y agrega un
espacio transparente Vamos a inspeccionar el código 😊
alrededor del borde
Padding
div{
Espacio entre el padding: 1px 2px 3px 4px;
contenido y el límite de la }
caja.
Top, Right, Botton, Left.
Border div{
Cuadro que incluye el
relleno y agrega una línea border: 1px solid blue ;
alrededor del relleno.
}
Width, Style, Color
Margin div{
Distancia entre una caja y
otra. margin: 1px 2px 3px 4px ;

Top, Right, Botton, Left. }


Box Sizing
● Content-box: es el valor por defecto, las propiedades
height y width no incluyen el borde y/o padding

● Border-box: las propiedades height y width están


incluidas el borde y/o padding
Display
Display:
Es una propiedad de CSS muy importante que permite
controlar el diseño, permite definir cómo se va a visualizar y
comportar un elemento.

- block

- inline

- inline-block

- none

Cada elemento tiene un valor por defecto, en general:


block o inline
Display
● Display: block
Elementos en bloque que ocupan el ancho de su
contenedor (elemento padre).
Ejemplos: <h1>,<p>,<div>

● Display: inline
Elementos en línea que ocupan sólo el tamaño de su
contenido.
Ejemplos: <a>,<button>,<input>

● Display: inline-block
Una fusión entre inline y block, en comparación con
display: block, la principal diferencia es que display:
inline-block no agrega un salto de línea después del
elemento, por lo que el elemento puede ubicarse junto a
otros elementos.

También podría gustarte