Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 5 vistas

    box model

    Cargado por

    socraimyt15

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    box model

    Cargado por

    socraimyt15
    5 vistas2 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    5 vistas2 páginas

    box model

    Cargado por

    socraimyt15

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    Está en la página 1de 2

    El modelo de caja CSS

    En CSS, el término "modelo de caja" se utiliza cuando se habla de diseño y


    disposición.

    El modelo de cuadro CSS es esencialmente un cuadro que envuelve cada


    elemento HTML. Consta de: contenido, relleno, bordes y márgenes. La
    siguiente imagen ilustra el modelo de caja:

    Explicación de las diferentes partes:

     Contenido : el contenido del cuadro, donde aparecen el texto y las


    imágenes.
     Relleno : borra un área alrededor del contenido. El acolchado es
    transparente.
     Borde : un borde que rodea el relleno y el contenido.
     Margen : borra un área fuera del borde. El margen es transparente.

    El modelo de caja nos permite agregar un borde alrededor de los elementos


    y definir el espacio entre elementos.

    Ejemplo
    Demostración del modelo de caja:

    div {
    width: 300px;
    border: 15px solid green;
    padding: 50px;
    margin: 20px;
    }

    Ancho y Alto de un Elemento


    Para establecer correctamente el ancho y el alto de un elemento en todos
    los navegadores, necesita saber cómo funciona el modelo de caja.

    Importante: cuando configuras las propiedades de ancho y alto de un


    elemento con CSS, simplemente estableces el ancho y el alto del área de
    contenido . Para calcular el ancho y alto total de un elemento, también
    debes incluir el relleno y los bordes.

    Ejemplo
    Este elemento <div> tendrá un ancho total de 350 px y una altura total de
    80 px:

    div {
    width: 320px;
    height: 50px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
    }

    Aquí está el cálculo:

    320px (ancho del área de contenido)


    + 20px (relleno izquierdo + relleno derecho)
    + 10px (borde izquierdo + borde derecho)
    = 350px (ancho total)

    50px (alto del área de contenido)


    + 20px (relleno superior + relleno inferior)
    + 10px ( borde superior + borde inferior)
    = 80px (alto total)

    El ancho total de un elemento debe calcularse así:

    Ancho total del elemento = ancho + relleno izquierdo + relleno derecho +


    borde izquierdo + borde derecho

    La altura total de un elemento debe calcularse así:

    Altura total del elemento = altura + relleno superior + relleno inferior +


    borde superior + borde inferior

    También podría gustarte