{"id":22930,"date":"2024-03-18T11:46:16","date_gmt":"2024-03-18T10:46:16","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/modelo-de-cajas-margenes-y-rellenos-una-guia-completa-para-css\/"},"modified":"2024-06-03T17:30:00","modified_gmt":"2024-06-03T16:30:00","slug":"modelo-de-cajas-margenes-y-rellenos-una-guia-completa-para-css","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/","title":{"rendered":"Model Boxes, Margins and Padding: A Complete Guide to CSS"},"content":{"rendered":"<p>Welcome to the definitive guide to the model of boxes, margins and padding in CSS. In this article, we are going to explore in depth how margins and padding work in CSS and how they can be used to create attractive and visually pleasing layouts.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#%C2%BFQue_es_el_modelo_de_cajas_en_CSS\" >What is the box model in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#%C2%BFComo_se_definen_los_margenes_en_CSS\" >How are margins defined in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#%C2%BFComo_se_definen_los_rellenos_en_CSS\" >How are padding defined in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#Ejemplos_de_uso_de_margenes_y_rellenos_en_CSS\" >Examples of using margins and padding in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#Preguntas_frecuentes_sobre_margenes_y_rellenos_en_CSS\" >Frequently Asked Questions about Margins and Padding in CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#1_%C2%BFCual_es_la_diferencia_entre_margenes_y_rellenos_en_CSS\" >1. What is the difference between margins and padding in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#2_%C2%BFCual_es_el_significado_de_los_margenes_en_CSS\" >2. What is the meaning of margins in CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#3_%C2%BFComo_puedo_centrar_un_elemento_en_CSS_utilizando_margenes\" >3. How can I center an element in CSS using margins?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/box-model-margins-and-padding-a-complete-guide-to-css\/#4_%C2%BFCual_es_la_diferencia_entre_margenes_positivos_y_negativos\" >4. What is the difference between positive and negative margins?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_modelo_de_cajas_en_CSS\"><\/span>What is the box model in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The box model is a fundamental part of CSS that defines how HTML elements are rendered and behave on a web page. Each HTML element is considered a rectangular box that consists of four main components: content, padding, border, and margin.<\/p>\n<p>The content is the actual area where the text and internal elements of the HTML element are displayed. Padding is the extra space between the content and the border. The border is a line that surrounds the content and padding, and the margin is the space between the border and other nearby elements.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFComo_se_definen_los_margenes_en_CSS\"><\/span>How are margins defined in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The margins are defined using the property <code>margin<\/code> in CSS. You can specify margins in four different ways:<\/p>\n<ul>\n<li>Individual margins: <code>margin-top<\/code>, <code>margin-right<\/code>, <code>margin-bottom<\/code> y <code>margin-left<\/code>.<\/li>\n<li>Horizontal margins: <code>margin-left<\/code> y <code>margin-right<\/code>.<\/li>\n<li>Vertical margins: <code>margin-top<\/code> y <code>margin-bottom<\/code>.<\/li>\n<li>Symmetrical margins: <code>margin<\/code> with two values (top\/bottom and right\/left).<\/li>\n<\/ul>\n<p>Margins can have a value in pixels, percentages, em, rem, or other units of measurement. Negative values can also be used to exceed the element&#039;s limits.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFComo_se_definen_los_rellenos_en_CSS\"><\/span>How are padding defined in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Fills are defined using the property <code>padding<\/code> in CSS. Like margins, padding can be specified in four different ways:<\/p>\n<ul>\n<li>Individual fillings: <code>padding-top<\/code>, <code>padding-right<\/code>, <code>padding-bottom<\/code> y <code>padding-left<\/code>.<\/li>\n<li>Horizontal fills: <code>padding-left<\/code> y <code>padding-right<\/code>.<\/li>\n<li>Vertical fills: <code>padding-top<\/code> y <code>padding-bottom<\/code>.<\/li>\n<li>Symmetrical fillings: <code>padding<\/code> with two values (top\/bottom and right\/left).<\/li>\n<\/ul>\n<p>Like margins, padding can have a value in pixels, percentages, em, rem, or other units of measurement. Negative values cannot be applied to padding.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplos_de_uso_de_margenes_y_rellenos_en_CSS\"><\/span>Examples of using margins and padding in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here are some practical examples of how margins and padding in CSS can be used to style HTML elements:<\/p>\n<pre>\n<code>\/* Styles for a paragraph *\/ p { margin-top: 20px; margin-bottom: 20px; padding: 10px; border: 1px solid black; }<\/code>\n<\/pre>\n<p>In this example, we&#039;ve applied 20 pixel margins to the top and bottom of the paragraph, 10 pixel padding on all sides, and a 1 pixel solid border around the paragraph.<\/p>\n<pre>\n<code>\/* Styles for a box with an image *\/ .box { margin: 20px; padding: 10px; border: 1px solid black; }<\/code>\n<\/pre>\n<p>In this second example, we have used the shorthand <code>margin<\/code> to apply 20 pixel margins on all sides of a box with class &quot;box&quot;. We have also applied a 10 pixel padding on all sides and a 1 pixel solid border.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes_sobre_margenes_y_rellenos_en_CSS\"><\/span>Frequently Asked Questions about Margins and Padding in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_%C2%BFCual_es_la_diferencia_entre_margenes_y_rellenos_en_CSS\"><\/span>1. What is the difference between margins and padding in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Margins are the space surrounding an HTML element, while padding is the extra space inside the element between the content and the border.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_%C2%BFCual_es_el_significado_de_los_margenes_en_CSS\"><\/span>2. What is the meaning of margins in CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Margins in CSS are used to control the spacing between HTML elements and nearby elements.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_%C2%BFComo_puedo_centrar_un_elemento_en_CSS_utilizando_margenes\"><\/span>3. How can I center an element in CSS using margins?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To center an element horizontally in CSS, you can set the left and right margins to &quot;auto&quot;. To vertically center an element, you can set the top and bottom margins to &quot;auto.&quot;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_%C2%BFCual_es_la_diferencia_entre_margenes_positivos_y_negativos\"><\/span>4. What is the difference between positive and negative margins?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Positive margins are used to create space between HTML elements, while negative margins are used to overlap elements and create more advanced visual effects.<\/p>\n<p>We hope this guide has been helpful in understanding how margins and padding work in CSS and how they can be used in your web design projects. Remember to experiment and play with margins and padding to achieve the desired layout.<\/p>\n<p>To learn more about CSS and other topics related to programming and digital marketing, visit our blog at <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. And if you have any questions or need additional help, don&#039;t hesitate to <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">contact us<\/a>. We will be happy to help you!<\/p>\n<p><em>Sources:<\/em> <br \/>\n&#8211; https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/CSS_Modelo_de_Cajas\/Valor_%5B%3Clength%3E%5D <br \/>\n\u2013 https:\/\/www.w3schools.com\/css\/css_boxmodel.asp<\/p>","protected":false},"excerpt":{"rendered":"<p>Bienvenidos a la gu\u00eda definitiva sobre el modelo de cajas, m\u00e1rgenes y rellenos en CSS. En este art\u00edculo, vamos a explorar en profundidad c\u00f3mo funcionan los m\u00e1rgenes y rellenos en CSS y c\u00f3mo se pueden utilizar para crear dise\u00f1os atractivos y visualmente agradables. \u00bfQu\u00e9 es el modelo de cajas en CSS? El modelo de cajas [&hellip;]<\/p>","protected":false},"author":1,"featured_media":22931,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1121],"tags":[205,620,500,519,358,619,617,60,618,37],"class_list":["post-22930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css","tag-blog","tag-cajas","tag-completa","tag-css","tag-guia","tag-margenes","tag-modelo","tag-para","tag-rellenos","tag-una"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=22930"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22931"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}