{"id":1229,"date":"2024-08-01T16:34:10","date_gmt":"2024-08-01T14:34:10","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1229"},"modified":"2024-08-01T16:34:12","modified_gmt":"2024-08-01T14:34:12","slug":"15-modelo-de-caja-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/15-modelo-de-caja-css\/","title":{"rendered":"15. Modelo de caja CSS"},"content":{"rendered":"\n

En CSS<\/strong>, el t\u00e9rmino modelo de caja<\/strong> se usa cuando se habla de dise\u00f1o<\/strong> y maquetaci\u00f3n<\/strong>. El modelo de caja CSS<\/strong> es esencialmente una caja que envuelve cada elemento HTML<\/strong>. Consiste en: m\u00e1rgenes<\/strong>, bordes<\/strong>, relleno<\/strong> y el contenido real<\/strong>. La siguiente imagen ilustra el modelo de caja:<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

Explicaci\u00f3n de las diferentes partes<\/h2>\n\n\n\n
    \n
  • Content (contenido)<\/strong>: El contenido de la caja, donde aparecen texto e im\u00e1genes.<\/li>\n\n\n\n
  • Padding (relleno)<\/strong>: Borra un \u00e1rea alrededor del contenido. El relleno es transparente.<\/li>\n\n\n\n
  • Border (borde)<\/strong>: Un borde que rodea el relleno y el contenido.<\/li>\n\n\n\n
  • Margin (margen)<\/strong>: Borra un \u00e1rea fuera del borde. El margen es transparente.<\/li>\n<\/ul>\n\n\n\n

    El modelo de caja<\/strong> nos permite agregar un borde alrededor de los elementos y definir el espacio entre los elementos.<\/p>\n\n\n\n

    Ejm<\/strong><\/p>\n\n\n\n

    <!DOCTYPE html>\n<html>\n<head>\n<style>\ndiv {\nbackground-color: lightgrey;\nwidth: 300px;\nborder: 15px solid green;\npadding: 50px;\nmargin: 20px;\n}\n<\/style>\n<\/head>\n<body>\n\n<h2>Demonstrating the Box Model<\/h2>\n\n<p>The CSS box model is essentially a box that wraps around every HTML element. \nIt consists of: borders, padding, margins, and the actual content.<\/p>\n\n<div>This text is the content of the box. We have added a 50px padding, \n20px margin and a 15px green border. Ut enim ad minim veniam, \nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo \nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse \ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non \nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/div>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
    Alto y ancho de un elemento<\/h2>\n\n\n\n
    Para establecer correctamente el ancho<\/strong> y el alto<\/strong> de un elemento en todos los navegadores, debes saber c\u00f3mo funciona el modelo de caja<\/strong>.<\/p>\n\n\n\n
    \n
    Importante<\/strong>: cuando estableces las propiedades de ancho<\/strong> y alto<\/strong> de un elemento con CSS<\/strong>, simplemente estableces el ancho<\/strong> y el alto<\/strong> del \u00e1rea de contenido<\/strong>. Para calcular el tama\u00f1o completo de un elemento, tambi\u00e9n debes agregar relleno<\/strong>, bordes<\/strong> y m\u00e1rgenes<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    El siguiente <div><\/em><\/strong> tiene un ancho total de 350px<\/p>\n\n\n\n
    div {\n  width: 320px;\n  padding: 10px;\n  border: 5px solid gray;\n  margin: 0;\n}<\/pre>\n\n\n\n
    El c\u00e1lculo es el siguiente:<\/p>\n\n\n\n
    320px (width)
    + 20px (left + right padding)
    + 10px (left + right border)
    + 0px (left + right margin)
    = 350px<\/strong><\/p>\n\n\n\n
    El ancho total de un elemento debe calcularse as\u00ed: Ancho total del elemento = ancho + relleno izquierdo + relleno derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho.<\/p>\n\n\n\n
    La altura total de un elemento debe calcularse as\u00ed: Altura total del elemento = altura + relleno superior + relleno inferior + borde superior + borde inferior + margen superior + margen inferior.<\/p>\n","protected":false},"excerpt":{"rendered":"
    En CSS, el t\u00e9rmino modelo de caja se usa cuando se habla de dise\u00f1o y maquetaci\u00f3n. El modelo de caja […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1229","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En CSS, el t\u00e9rmino modelo de caja se usa cuando se habla de dise\u00f1o y maquetaci\u00f3n. El modelo de caja […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1229"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1229\/revisions"}],"predecessor-version":[{"id":1232,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1229\/revisions\/1232"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}