{"id":2186,"date":"2011-12-28T11:17:58","date_gmt":"2011-12-28T13:17:58","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2186"},"modified":"2011-12-28T11:18:27","modified_gmt":"2011-12-28T13:18:27","slug":"diferenca-entre-as-propriedades-margin-e-padding-do-css","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css","title":{"rendered":"Diferen\u00e7a entre as propriedades margin e padding do css"},"content":{"rendered":"<p>As <strong>propriedades <code>margin<\/code> e <code>padding<\/code><\/strong> podem ser confusas para desenvolvedores iniciantes. Esse artigo \u00e9 para aqueles que est\u00e3o come\u00e7ando a aprender CSS. Aqui explico de forma bem detalhada as propriedades fundamentais do CSS, margin e padding. Saiba quando usar um ou o outro.<br \/>\n<!--more Continuar lendo...--><br \/>\nPara desenvolvedores experientes em CSS as propriedades margin e padding n\u00e3o s\u00e3o nem um mist\u00e9rio, entretanto para desenvolvedores que est\u00e3o iniciando no mundo do desenvolvimento web, j\u00e1 passa a ser uma d\u00favida bastante frequente. Propriedade margin em CSS<\/p>\n<h2>propriedade margin<\/h2>\n<p>A propriedade margin do CSS define as dimens\u00f5es das margens de um elemento CSS. Elas comp\u00f5em as \u00e1reas verticais e horizontais entre os elementos. Caso os elementos n\u00e3o tenham margens em torno deles, eles v\u00e3o encostar uns nos outros. Alguns elementos t\u00eam margens por padr\u00e3o, ou seja, mesmo que voc\u00ea n\u00e3o adicione margem o elemento j\u00e1 \u00e9 criado com margens. Cito como exemplo os elementos de cabe\u00e7alhos h1, h2&#8230; h6.<\/p>\n<p>Abaixo um exemplo das margens em CSS<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2189\" title=\"Exemplo propriedade margin\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif\" alt=\"Exemplo propriedade margin\" width=\"510\" height=\"300\" srcset=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif 510w, https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin-300x176.gif 300w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/p>\n<p>A propriedade margin em CSS define o espa\u00e7o exterior entre os elementos. Compreende tamb\u00e9m o espa\u00e7amento entre os elementos e tela do navegador do usu\u00e1rio, por exemplo, o desenvolvedor deseja que um elemento fique a 20px do topo da p\u00e1gina do usu\u00e1rio.<\/p>\n<h3>Como definir margens em CSS<\/h3>\n<p>As margens podem ser aplicadas nos quatros lados de um elemento HTML. Superior, direita, inferior e esquerda.<\/p>\n<ul>\n<li><code>margin -top<\/code>: espa\u00e7amento para a parte superior;<\/li>\n<li><code>margin -right<\/code>: espa\u00e7amento para o lado direito;<\/li>\n<li><code>margin -bottom<\/code>: espa\u00e7amento para a parte inferior;<\/li>\n<li><code>margin -left<\/code>: espa\u00e7amento para o lado esquerdo.<\/li>\n<\/ul>\n<p>Esta propriedade CSS, assim como outras, aceita a sintaxe abreviada.<\/p>\n<p>Margens iguais nos quatro lados do elemento.<br \/>\n<code>margin: 30px;<\/code><\/p>\n<p>Margem superior e inferior de 10px. Margem esquerda e direita de 15px.<br \/>\n<code>margin: 10px 15px;<\/code><\/p>\n<p>Margem superior de 10px. Margem direita e esquerda de 15px. Margem inferior de 20 px.<br \/>\n<code>margin: 10px 15px 20px;<\/code><\/p>\n<p>Margem superior de 5px. Margem direita de 10px. Margem inferior de 15px. Margem esquerda de 20px;<br \/>\n<code>margin: 5px 10px 15px 20px;<\/code><\/p>\n<h2>Propriedade padding em CSS<\/h2>\n<p>A propriedade do CSS padding define o espa\u00e7amento entre o conte\u00fado e a borda de um elemento HTML. Esta borda por padr\u00e3o n\u00e3o aparece para o usu\u00e1rio. \u00c9 a \u00e1rea que delimita um elemento HTML. \u00c9 o espa\u00e7o horizontal e vertical em torno da \u00e1rea de conte\u00fado de um elemento, por exemplo, espa\u00e7amento entre as bordas de uma div e o par\u00e1grafo contido dentro da mesma.<\/p>\n<p>Abaixo um exemplo da propriedade CSS padding<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-padding.gif\" alt=\"Exemplo propriedade padding\" title=\"Exemplo propriedade padding\" width=\"481\" height=\"267\" class=\"aligncenter size-full wp-image-2190\" srcset=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-padding.gif 481w, https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-padding-300x166.gif 300w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/p>\n<p>Repare que a propriedade padding ao contr\u00e1rio da propriedade margin define o espa\u00e7amento interno do elemento. NO exemplo acima com uso do padding conseguimos posicionar o texto dentro do elemento.<\/p>\n<h3>Como definir padding em CSS<\/h3>\n<p>Igual a propriedade margin podemos definir espa\u00e7amento diretamente para um lado do elemento:<\/p>\n<ul>\n<li><code>padding-top<\/code>: espa\u00e7amento para a parte superior;<\/li>\n<li><code>padding-right<\/code>: espa\u00e7amento para o lado direito;<\/li>\n<li><code>padding-bottom<\/code>: espa\u00e7amento para a parte inferior;<\/li>\n<li><code>padding-left<\/code>: espa\u00e7amento para o lado esquerdo.<\/li>\n<\/ul>\n<p>A propriedade CSS padding , assim como outras e margin, aceita a sintaxe abreviada tamb\u00e9m.<\/p>\n<p>Espa\u00e7amentos iguais nos quatro lados do elemento.<br \/>\n<code>padding: 30px;<\/code><br \/>\nMargem superior e inferior de 10px. Margem esquerda e direita de 15px.<br \/>\n<code>padding: 10px 15px;<\/code><br \/>\nMargem superior de 10px. Margem direita e esquerda de 15px. Margem inferior de 20 px.<br \/>\n<code>padding: 10px 15px 20px;<\/code><\/p>\n<p>Abaixo um exemplo mais completo<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin-e-padding.gif\" alt=\"Exemplo propriedade margin e padding\" title=\"Exemplo propriedade margin e padding\" width=\"510\" height=\"152\" class=\"aligncenter size-full wp-image-2194\" srcset=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin-e-padding.gif 510w, https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin-e-padding-300x89.gif 300w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/p>\n<p>Concluindo, a margem define o espa\u00e7o fora de seu box em rela\u00e7\u00e3o a outros elementos, exemplo, espa\u00e7o entre divs, espa\u00e7o entre um elemento h2 e um par\u00e1grafo, etc. J\u00e1 o padding define o espa\u00e7o entre o elemento e o seu conte\u00fado, exemplo, dist\u00e2ncia da borda da div e seu conte\u00fado. Espero que com este arigo voc\u00eas tenham compreendido a diferen\u00e7a das duas propriedades, podendo assim utilizar de forma mais eficaz as duas propriedades.<\/p>\n<p>Me siga no Twitter: <a href=\"http:\/\/twitter.com\/kadunew\" rel=\"nofollow\">@kadunew<\/a> ou assine nosso <a href=\"feed:\/\/http\/\/www.kadunew.com\/blog\/feed\">Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As propriedades margin e padding podem ser confusas para desenvolvedores iniciantes. Esse artigo \u00e9 para aqueles que est\u00e3o come\u00e7ando a aprender CSS. Aqui explico de forma bem detalhada as propriedades fundamentais do CSS, margin e padding. Saiba quando usar um ou o outro.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2186","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Diferen\u00e7a entre as propriedades margin e padding do css<\/title>\n<meta name=\"description\" content=\"Nesse artigo explico de forma detalhada e did\u00e1tica a diferen\u00e7a entre as propriedades margin e padding do CSS. Veja exemplos e como aplica-las.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diferen\u00e7a entre as propriedades margin e padding do css\" \/>\n<meta property=\"og:description\" content=\"Nesse artigo explico de forma detalhada e did\u00e1tica a diferen\u00e7a entre as propriedades margin e padding do CSS. Veja exemplos e como aplica-las.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2011-12-28T13:17:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-12-28T13:18:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"510\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css\",\"url\":\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css\",\"name\":\"Diferen\u00e7a entre as propriedades margin e padding do css\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif\",\"datePublished\":\"2011-12-28T13:17:58+00:00\",\"dateModified\":\"2011-12-28T13:18:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Nesse artigo explico de forma detalhada e did\u00e1tica a diferen\u00e7a entre as propriedades margin e padding do CSS. Veja exemplos e como aplica-las.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif\",\"width\":\"510\",\"height\":\"300\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/css\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diferen\u00e7a entre as propriedades margin e padding do css\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Diferen\u00e7a entre as propriedades margin e padding do css","description":"Nesse artigo explico de forma detalhada e did\u00e1tica a diferen\u00e7a entre as propriedades margin e padding do CSS. Veja exemplos e como aplica-las.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css","og_locale":"pt_BR","og_type":"article","og_title":"Diferen\u00e7a entre as propriedades margin e padding do css","og_description":"Nesse artigo explico de forma detalhada e did\u00e1tica a diferen\u00e7a entre as propriedades margin e padding do CSS. Veja exemplos e como aplica-las.","og_url":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css","og_site_name":"KADUNEW","article_published_time":"2011-12-28T13:17:58+00:00","article_modified_time":"2011-12-28T13:18:27+00:00","og_image":[{"width":510,"height":300,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif","type":"image\/gif"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css","url":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css","name":"Diferen\u00e7a entre as propriedades margin e padding do css","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif","datePublished":"2011-12-28T13:17:58+00:00","dateModified":"2011-12-28T13:18:27+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Nesse artigo explico de forma detalhada e did\u00e1tica a diferen\u00e7a entre as propriedades margin e padding do CSS. Veja exemplos e como aplica-las.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2011\/12\/exemplo-propriedade-margin.gif","width":"510","height":"300"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/css\/diferenca-entre-as-propriedades-margin-e-padding-do-css#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.kadunew.com\/blog\/category\/css"},{"@type":"ListItem","position":3,"name":"Diferen\u00e7a entre as propriedades margin e padding do css"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2186"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=2186"}],"version-history":[{"count":8,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2186\/revisions"}],"predecessor-version":[{"id":2198,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2186\/revisions\/2198"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=2186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=2186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=2186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}