{"id":235,"date":"2023-01-13T11:11:39","date_gmt":"2023-01-13T11:11:39","guid":{"rendered":"http:\/\/javigomez.org\/?p=235"},"modified":"2025-09-29T20:34:10","modified_gmt":"2025-09-29T20:34:10","slug":"box-sizing-el-problema-de-que-una-capa-hija-sea-mas-grande-que-la-capa-padre","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/01\/13\/box-sizing-el-problema-de-que-una-capa-hija-sea-mas-grande-que-la-capa-padre\/","title":{"rendered":"box-sizing: el problema de que una capa hija sea mas grande que la capa padre"},"content":{"rendered":"\n<p>Algunas veces, cuando estamos maquetando, nos damos cuenta que los div hijos adquieren mas tama\u00f1o que su contenedor. Esto ocurre porque al ancho que le damos al div hijo, hay que sumarle el tama\u00f1o del border y el tama\u00f1o de padding.<\/p>\n\n\n\n<p>Esto lo podemos arreglar con el atributo box-sizing, diciendo que en el ancho cuente o no estos elementos.<\/p>\n\n\n\n<p>La propiedad <strong>box-sizing<\/strong> puede ser usada para ajustar el este comportamiento:<\/p>\n\n\n\n<p><strong>content-box<\/strong> es el valor por defecto. Si definimos un ancho de la caja de 100px y luego ponemos un padding de 10px y un borde de 5px, el tama\u00f1o total de la caja ser\u00e1 de 115px.<\/p>\n\n\n\n<p><strong>border-box<\/strong> hace que el navegador tenga en cuenta el borde y el padding del componente, a la hora de marcar el tama\u00f1o. Si tenemos un elemento de 50px con un padding de 10px y un borde de 5px, el componente seguir\u00e1 teniendo 50px. Hay que tener cuidado ya que el espacio del padding y el borde se lo quita al componente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/01\/image-10-3-1.png\" alt=\"\" class=\"wp-image-239\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/01\/image-10-4-1.png\" alt=\"\" class=\"wp-image-240\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/01\/image-10-5-1.png\" alt=\"\" class=\"wp-image-241\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;interactive-examples.mdn.mozilla.net\/pages\/css\/box-sizing.html<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Algunas veces, cuando estamos maquetando, nos damos cuenta que los div hijos adquieren mas tama\u00f1o que su contenedor. Esto ocurre porque al ancho que le &hellip; <\/p>\n","protected":false},"author":1,"featured_media":236,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[54,55,57,94,106,253],"class_list":["post-235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-border","tag-border-box","tag-box-sizing","tag-content-box","tag-css","tag-padding"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/235\/revisions"}],"predecessor-version":[{"id":957,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/235\/revisions\/957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/236"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}