{"id":754,"date":"2024-04-25T08:47:03","date_gmt":"2024-04-25T11:47:03","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=754"},"modified":"2025-11-08T09:32:47","modified_gmt":"2025-11-08T12:32:47","slug":"padding-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/","title":{"rendered":"Padding no CSS"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Padding no CSS<\/strong>: O <strong><code>padding<\/code><\/strong> \u00e9 uma propriedade fundamental do Box Model, respons\u00e1vel por controlar o <strong>espa\u00e7amento interno<\/strong> de um elemento. Ele cria uma \u00e1rea de respiro entre o <strong>Conte\u00fado<\/strong> (texto, imagens) e a <strong>Borda<\/strong> do elemento, melhorando a legibilidade e a est\u00e9tica do design.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, vamos detalhar a sintaxe do <code>padding<\/code>, como ele se relaciona com o tamanho final do seu elemento e a distin\u00e7\u00e3o vital entre ele e a <code>margin<\/code>.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. O Que \u00e9 Padding e Seu Efeito Visual<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O <code>padding<\/code> \u00e9 a camada que fica <strong>dentro<\/strong> da Borda do elemento.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Fun\u00e7\u00e3o:<\/strong> Cria espa\u00e7o de respiro interno.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Cor:<\/strong> O <code>padding<\/code> <strong>assume a cor de fundo<\/strong> (<code>background-color<\/code>) do elemento, tornando-o visualmente parte do <em>container<\/em>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Sintaxe Shorthand<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A propriedade <code>padding<\/code> \u00e9 uma <em>shorthand<\/em> que permite definir o espa\u00e7amento para os quatro lados (superior, direito, inferior, esquerdo) em uma \u00fanica linha.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Valores<\/strong><\/td><td><strong>Lados Afetados<\/strong><\/td><td><strong>Ordem (Sentido Hor\u00e1rio)<\/strong><\/td><td><strong>Exemplo<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>1 Valor<\/strong><\/td><td>Todos os 4 lados<\/td><td>Topo, Direita, Baixo, Esquerda<\/td><td><code>padding: 15px;<\/code><\/td><\/tr><tr><td><strong>2 Valores<\/strong><\/td><td>Vertical, Horizontal<\/td><td>Topo\/Baixo (1\u00ba); Direita\/Esquerda (2\u00ba)<\/td><td><code>padding: 10px 20px;<\/code><\/td><\/tr><tr><td><strong>3 Valores<\/strong><\/td><td>Topo, Horizontal, Baixo<\/td><td>Topo (1\u00ba); Direita\/Esquerda (2\u00ba); Baixo (3\u00ba)<\/td><td><code>padding: 5px 10px 15px;<\/code><\/td><\/tr><tr><td><strong>4 Valores<\/strong><\/td><td>Cada lado individualmente<\/td><td>Topo (1\u00ba), Direita (2\u00ba), Baixo (3\u00ba), Esquerda (4\u00ba)<\/td><td><code>padding: 1px 2px 3px 4px;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Voc\u00ea tamb\u00e9m pode usar as propriedades individuais para um controle preciso: <code>padding-top<\/code>, <code>padding-right<\/code>, <code>padding-bottom<\/code>, <code>padding-left<\/code>.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. Padding vs. Margin: A Diferen\u00e7a de Foco<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Embora ambos criem espa\u00e7o, eles o fazem em \u00e1reas diferentes do Box Model:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Caracter\u00edstica<\/strong><\/td><td><strong>padding<\/strong><\/td><td><strong>margin<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Localiza\u00e7\u00e3o<\/strong><\/td><td><strong>Dentro<\/strong> do elemento, entre o Conte\u00fado e a Borda.<\/td><td><strong>Fora<\/strong> do elemento, al\u00e9m da Borda.<\/td><\/tr><tr><td><strong>Fundo<\/strong><\/td><td>Assume a <code>background-color<\/code> do elemento.<\/td><td>\u00c9 sempre transparente.<\/td><\/tr><tr><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><td>Espa\u00e7amento interno, respiro do conte\u00fado.<\/td><td>Afastamento externo de elementos vizinhos.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">3. A Intera\u00e7\u00e3o Crucial com <code>box-sizing<\/code><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A maneira como o <code>padding<\/code> afeta o tamanho final da sua caixa depende da propriedade <code>box-sizing<\/code>:<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">A. <code>content-box<\/code> (Padr\u00e3o)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">No modelo padr\u00e3o (<code>content-box<\/code>), a <code>width<\/code> e <code>height<\/code> definem apenas o Conte\u00fado. O <strong><code>padding<\/code> \u00e9 adicionado<\/strong> ao tamanho total da caixa.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B. <code>border-box<\/code> (Melhor Pr\u00e1tica)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Na pr\u00e1tica profissional, usamos <strong><code>box-sizing: border-box<\/code><\/strong> (como definido no artigo anterior do Box Model). Neste modelo, a <code>width<\/code> e <code>height<\/code> <strong>incluem<\/strong> o <code>padding<\/code> e a <code>border<\/code>.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Vantagem:<\/strong> Com <code>border-box<\/code>, adicionar <code>padding<\/code> a um elemento n\u00e3o far\u00e1 com que ele inesperadamente transborde seu container. O tamanho da caixa permanece fixo e previs\u00edvel.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Padding em um componente com border-box: A largura total permanece 200px. *\/\n.componente {\n  box-sizing: border-box;\n  width: 200px;\n  padding: 20px; \/* Reduz a \u00e1rea do conte\u00fado interno para 160px. *\/\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">4. Considera\u00e7\u00f5es de Uso<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Unidades Relativas:<\/strong> Use unidades como <strong><code>rem<\/code><\/strong> ou <strong><code>em<\/code><\/strong> para o <code>padding<\/code> em layouts responsivos. Isso permite que o espa\u00e7amento se ajuste proporcionalmente ao tamanho da fonte ou ao contexto.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Evitar <em>Zero Padding<\/em>:<\/strong> Embora seja tentador definir <code>padding: 0;<\/code>, muitas vezes \u00e9 melhor omitir a propriedade se o valor j\u00e1 for zero, a menos que voc\u00ea esteja sobrescrevendo um estilo anterior.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Espa\u00e7amento Vertical em Links:<\/strong> Em bot\u00f5es (<code>&lt;a><\/code> ou <code>&lt;button><\/code>), o <code>padding<\/code> \u00e9 usado para aumentar a \u00e1rea clic\u00e1vel, melhorando a usabilidade em dispositivos <em>touch<\/em>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o Padding no CSS<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O <code>padding<\/code> \u00e9 o guardi\u00e3o do espa\u00e7o interno, garantindo que o seu conte\u00fado n\u00e3o fique esmagado contra as bordas. Ao domin\u00e1-lo, especialmente em conjunto com a regra <code>box-sizing: border-box<\/code>, voc\u00ea pode criar elementos com espa\u00e7amento consistente, limpo e que se encaixam perfeitamente em layouts complexos.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" alt=\"HTML\" class=\"wp-image-600\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" alt=\"CSS\" class=\"wp-image-702\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp\" alt=\"Javascript\" class=\"wp-image-804\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.webp\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.webp\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Padding no CSS: O padding \u00e9 uma propriedade fundamental do Box Model, respons\u00e1vel por controlar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-754","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Padding no CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Padding no CSS: Neste artigo, vamos explorar em detalhes a propriedade padding e suas diversas aplica\u00e7\u00f5es....\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Padding no CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Padding no CSS: Neste artigo, vamos explorar em detalhes a propriedade padding e suas diversas aplica\u00e7\u00f5es....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-25T11:47:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-08T12:32:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Padding no CSS\",\"datePublished\":\"2024-04-25T11:47:03+00:00\",\"dateModified\":\"2025-11-08T12:32:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/\"},\"wordCount\":537,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/\",\"name\":\"Padding no CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-25T11:47:03+00:00\",\"dateModified\":\"2025-11-08T12:32:47+00:00\",\"description\":\"Padding no CSS: Neste artigo, vamos explorar em detalhes a propriedade padding e suas diversas aplica\u00e7\u00f5es....\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/padding-no-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Padding no CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Padding no CSS - BLOG THIAGO ROSSI","description":"Padding no CSS: Neste artigo, vamos explorar em detalhes a propriedade padding e suas diversas aplica\u00e7\u00f5es....","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:\/\/thiagorossi.com.br\/blog\/padding-no-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Padding no CSS - BLOG THIAGO ROSSI","og_description":"Padding no CSS: Neste artigo, vamos explorar em detalhes a propriedade padding e suas diversas aplica\u00e7\u00f5es....","og_url":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-25T11:47:03+00:00","article_modified_time":"2025-11-08T12:32:47+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Padding no CSS","datePublished":"2024-04-25T11:47:03+00:00","dateModified":"2025-11-08T12:32:47+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/"},"wordCount":537,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/","name":"Padding no CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-25T11:47:03+00:00","dateModified":"2025-11-08T12:32:47+00:00","description":"Padding no CSS: Neste artigo, vamos explorar em detalhes a propriedade padding e suas diversas aplica\u00e7\u00f5es....","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/padding-no-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Padding no CSS"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=754"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/754\/revisions"}],"predecessor-version":[{"id":4437,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/754\/revisions\/4437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}