{"id":118598,"date":"2023-02-22T10:00:00","date_gmt":"2023-02-22T13:00:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=15510"},"modified":"2023-08-01T15:09:02","modified_gmt":"2023-08-01T18:09:02","slug":"css-padding","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/","title":{"rendered":"CSS padding: como aumentar a legibilidade do seu conte\u00fado"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Espa\u00e7amento entre elementos: como o CSS padding pode ajudar a melhorar a leitura<\/h3>\n\n\n\n<p>O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site, especialmente quando se trata da legibilidade do conte\u00fado. O espa\u00e7amento apropriado entre elementos pode tornar o conte\u00fado mais f\u00e1cil de ler e compreender, enquanto que um espa\u00e7amento inadequado pode causar distra\u00e7\u00e3o e dificuldade na leitura. \u00c9 a\u00ed que entra o CSS padding.<\/p>\n\n\n\n<p>O CSS padding \u00e9 uma propriedade que define o espa\u00e7amento entre o conte\u00fado e a borda de um elemento HTML. Ele pode ser usado para aumentar o espa\u00e7o entre o texto e as bordas da caixa de conte\u00fado, permitindo que o texto respire e fique mais f\u00e1cil de ler.<\/p>\n\n\n\n<p>Por exemplo, suponha que voc\u00ea esteja escrevendo um blog post e deseje adicionar algum espa\u00e7o extra ao redor do texto para melhorar a legibilidade. Voc\u00ea pode usar a propriedade CSS padding para adicionar esse espa\u00e7o extra, como neste exemplo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"252\" src=\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/carbon-10-1024x252.png\" alt=\"\" class=\"wp-image-15511\" srcset=\"https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-10-1024x252.png 1024w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-10-949x234.png 949w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-10-768x189.png 768w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-10-1027x253.png 1027w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-10-515x127.png 515w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-10-150x37.png 150w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-10.png 1064w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Este CSS adiciona um espa\u00e7amento de 10 pixels entre o conte\u00fado do elemento p e sua borda. O resultado \u00e9 um texto mais espa\u00e7ado e f\u00e1cil de ler.<\/p>\n\n\n\n<p>Al\u00e9m de adicionar espa\u00e7o extra ao redor do texto, o CSS padding tamb\u00e9m pode ser usado para criar um espa\u00e7amento visualmente agrad\u00e1vel entre os elementos de um layout. Por exemplo, voc\u00ea pode usar a propriedade CSS padding para criar um espa\u00e7amento consistente entre os bot\u00f5es de um formul\u00e1rio:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/carbon-11-1024x285.png\" alt=\"\" class=\"wp-image-15512\" srcset=\"https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-11-1024x285.png 1024w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-11-949x264.png 949w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-11-768x214.png 768w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-11-1027x286.png 1027w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-11-515x143.png 515w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-11-150x42.png 150w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/carbon-11.png 1064w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Este CSS adiciona um espa\u00e7amento de 10 pixels acima e abaixo do conte\u00fado do bot\u00e3o e 20 pixels \u00e0 esquerda e \u00e0 direita do conte\u00fado. O resultado \u00e9 um espa\u00e7amento consistente e agrad\u00e1vel entre os bot\u00f5es do formul\u00e1rio.<\/p>\n\n\n\n<p>O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site e pode afetar significativamente a legibilidade do conte\u00fado. O CSS padding \u00e9 uma ferramenta poderosa para criar espa\u00e7amento entre elementos de forma consistente e visualmente agrad\u00e1vel, tornando o conte\u00fado mais f\u00e1cil de ler e compreender. Use-o de forma estrat\u00e9gica para melhorar a legibilidade e a apar\u00eancia do seu site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Aumente a legibilidade do seu conte\u00fado com estas t\u00e9cnicas de CSS padding<\/h3>\n\n\n\n<p>A legibilidade \u00e9 uma parte fundamental do design de um site, especialmente quando se trata do conte\u00fado. O CSS padding \u00e9 uma ferramenta poderosa que pode ser usada para melhorar a legibilidade do conte\u00fado. Neste texto, vamos explorar algumas t\u00e9cnicas de CSS padding que podem ser usadas para aumentar a legibilidade do seu conte\u00fado.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use espa\u00e7amento consistente<\/li>\n<\/ul>\n\n\n\n<p>Um dos principais benef\u00edcios do CSS padding \u00e9 a capacidade de criar um espa\u00e7amento consistente entre elementos. Isso \u00e9 particularmente importante para o conte\u00fado do seu site. Use CSS padding para criar um espa\u00e7amento consistente entre os par\u00e1grafos e outros elementos de texto para garantir que o conte\u00fado seja f\u00e1cil de ler e compreender. Por exemplo, voc\u00ea pode adicionar 20 pixels de padding na parte superior e inferior de cada par\u00e1grafo e 30 pixels de padding entre cada se\u00e7\u00e3o, para criar um espa\u00e7amento uniforme e consistente em todo o conte\u00fado.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use espa\u00e7amento generoso<\/li>\n<\/ul>\n\n\n\n<p>O espa\u00e7amento generoso pode ser \u00fatil para aumentar a legibilidade do seu conte\u00fado. O espa\u00e7amento extra ajuda a garantir que o texto n\u00e3o pare\u00e7a lotado e a tornar mais f\u00e1cil para os leitores lerem o conte\u00fado. Por exemplo, ao usar o CSS padding para o conte\u00fado principal do seu site, voc\u00ea pode adicionar um espa\u00e7amento extra para torn\u00e1-lo mais f\u00e1cil de ler e visualmente atraente. No entanto, lembre-se de n\u00e3o exagerar, pois um espa\u00e7amento excessivo pode tornar o site muito espa\u00e7oso e pouco pr\u00e1tico.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use espa\u00e7amento estrat\u00e9gico<\/li>\n<\/ul>\n\n\n\n<p>Outra t\u00e9cnica que pode ajudar a aumentar a legibilidade do seu conte\u00fado \u00e9 o uso de espa\u00e7amento estrat\u00e9gico. O espa\u00e7amento pode ser usado para destacar elementos importantes, como t\u00edtulos e subt\u00edtulos. Voc\u00ea pode usar o CSS padding para adicionar espa\u00e7o extra em torno desses elementos, a fim de destac\u00e1-los e torn\u00e1-los mais f\u00e1ceis de encontrar e ler. Por exemplo, voc\u00ea pode adicionar mais padding na parte superior e inferior de um t\u00edtulo para destacar o conte\u00fado que o rodeia.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use espa\u00e7amento para criar uma hierarquia visual<\/li>\n<\/ul>\n\n\n\n<p>O CSS padding tamb\u00e9m pode ser usado para criar uma <a href=\"https:\/\/performait.com\/hierarquia-visual\/#:~:text=A%20Hierarquia%20visual%20%C3%A9%20o,orientar%20para%20as%20a%C3%A7%C3%B5es%20desejadas.\" data-type=\"URL\" data-id=\"https:\/\/performait.com\/hierarquia-visual\/#:~:text=A%20Hierarquia%20visual%20%C3%A9%20o,orientar%20para%20as%20a%C3%A7%C3%B5es%20desejadas.\" target=\"_blank\" rel=\"noreferrer noopener\">hierarquia visual <\/a>clara no seu conte\u00fado. Por exemplo, voc\u00ea pode usar o CSS padding para adicionar mais espa\u00e7o ao redor dos elementos mais importantes e menos espa\u00e7o ao redor dos elementos menos importantes. Isso pode ajudar os leitores a navegar pelo seu conte\u00fado com mais facilidade e entender a estrutura do seu site. Por exemplo, voc\u00ea pode adicionar mais padding em torno de um t\u00edtulo de se\u00e7\u00e3o do que em torno do texto que se segue a ele.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Como ajustar o CSS padding para criar uma hierarquia visual clara em seu site<\/h3>\n\n\n\n<p>A hierarquia visual \u00e9 um aspecto fundamental do design de um site. Ela ajuda a orientar os usu\u00e1rios sobre o que \u00e9 mais importante e a fornecer uma estrutura clara para o conte\u00fado do site. Uma maneira eficaz de criar uma hierarquia visual \u00e9 ajustar o CSS padding. Neste texto, vamos explorar como o CSS padding pode ser ajustado para criar uma hierarquia visual clara em seu site.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adicione mais padding aos elementos mais importantes<\/li>\n<\/ul>\n\n\n\n<p>Uma das maneiras mais eficazes de ajustar o CSS padding para criar uma hierarquia visual clara \u00e9 adicionar mais padding aos elementos mais importantes do site. Por exemplo, voc\u00ea pode adicionar mais padding em torno de um t\u00edtulo de se\u00e7\u00e3o para torn\u00e1-lo mais proeminente e f\u00e1cil de encontrar. Isso ajuda os usu\u00e1rios a identificar rapidamente o que \u00e9 mais importante no seu site e a navegar pelo conte\u00fado com mais facilidade.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reduza o padding em torno de elementos menos importantes<\/li>\n<\/ul>\n\n\n\n<p>Da mesma forma, \u00e9 importante reduzir o padding em torno dos elementos menos importantes do seu site. Por exemplo, voc\u00ea pode reduzir o padding em torno de um subt\u00edtulo ou par\u00e1grafo para destac\u00e1-lo menos em compara\u00e7\u00e3o com os elementos mais importantes. Isso ajuda a garantir que os usu\u00e1rios possam navegar pelo seu site de forma eficiente, sem se distra\u00edrem com elementos menos importantes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Crie uma hierarquia visual com tamanhos de fonte<\/li>\n<\/ul>\n\n\n\n<p>Al\u00e9m de ajustar o CSS padding, outra t\u00e9cnica que pode ajudar a criar uma hierarquia visual clara \u00e9 usar tamanhos de fonte diferentes para os elementos do seu site. Por exemplo, voc\u00ea pode usar uma fonte maior para o t\u00edtulo de se\u00e7\u00e3o e uma fonte menor para o texto que se segue a ele. Isso ajuda a diferenciar os diferentes elementos do seu site e a orientar os usu\u00e1rios sobre o que \u00e9 mais importante.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use cores para criar destaque<\/li>\n<\/ul>\n\n\n\n<p>Outra maneira de ajustar o CSS padding para criar uma hierarquia visual clara \u00e9 usar cores para criar destaque. Por exemplo, voc\u00ea pode usar uma cor mais vibrante para o t\u00edtulo de se\u00e7\u00e3o e uma cor mais suave para o texto que se segue a ele. Isso ajuda a destacar os elementos mais importantes do seu site e a orientar os usu\u00e1rios sobre a estrutura do conte\u00fado.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Teste e ajuste<\/li>\n<\/ul>\n\n\n\n<p>Por fim, \u00e9 importante testar e ajustar as configura\u00e7\u00f5es de CSS padding para garantir que sua hierarquia visual esteja funcionando da maneira mais eficaz poss\u00edvel. Experimente diferentes configura\u00e7\u00f5es de padding e verifique como elas afetam a apar\u00eancia e a usabilidade do seu site. Isso ajuda a garantir que seus usu\u00e1rios possam navegar pelo seu site de forma f\u00e1cil e intuitiva.<\/p>\n\n\n\n<p>Ajustar o CSS padding pode ajudar a criar uma hierarquia visual clara em seu site. Adicionar mais padding aos elementos mais importantes, reduzir o padding em torno de elementos menos importantes, usar tamanhos de fonte diferentes e cores para criar destaque s\u00e3o algumas das t\u00e9cnicas que podem ser usadas. Teste e ajuste as configura\u00e7\u00f5es de CSS padding para garantir que sua hierarquia visual esteja funcionando da melhor maneira poss\u00edvel. Com essas t\u00e9cnicas, voc\u00ea pode garantir que seu site seja bem organizado e f\u00e1cil de navegar para seus usu\u00e1rios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Estude Programa\u00e7\u00e3o com a Awari<\/h3>\n\n\n\n<p>Em conclus\u00e3o, descubra como usar o CSS padding para melhorar a legibilidade do seu conte\u00fado e criar uma hierarquia visual clara em seu site. Saiba como ajustar o padding e outras t\u00e9cnicas de design para criar um site bem organizado e f\u00e1cil de navegar com a Awari.<\/p>\n\n\n\n<p>Se voc\u00ea deseja se tornar um especialista nessa \u00e1rea, recomendamos estudar Programa\u00e7\u00e3o com os cursos da Awari. Nossos cursos incluem aulas ao vivo com especialistas e mentorias individuais com grandes profissionais do mercado, o que garante a voc\u00ea uma forma\u00e7\u00e3o de qualidade e atualizada. N\u00e3o perca mais tempo e aproveite essa oportunidade para se destacar no mercado de trabalho e alcan\u00e7ar seus objetivos profissionais. <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/front-end\/?utm_source=blog&amp;utm_medium=link&amp;utm_campaign=curso-front-end\" target=\"_blank\" rel=\"noreferrer noopener\">Clique aqui, estamos esperando por voc\u00ea!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Espa\u00e7amento entre elementos: como o CSS padding pode ajudar a melhorar a leitura O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site, especialmente quando se trata da legibilidade do conte\u00fado. O espa\u00e7amento apropriado entre elementos pode tornar o conte\u00fado mais f\u00e1cil de ler e compreender, enquanto que um espa\u00e7amento inadequado pode [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-118598","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS padding: como aumentar a legibilidade do seu conte\u00fado - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Espa\u00e7amento entre elementos: como o CSS padding pode ajudar a melhorar a leitura O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site,...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS padding: como aumentar a legibilidade do seu conte\u00fado - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Espa\u00e7amento entre elementos: como o CSS padding pode ajudar a melhorar a leitura O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-22T13:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-01T18:09:02+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/\",\"name\":\"CSS padding: como aumentar a legibilidade do seu conte\u00fado - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/carbon-10-1024x252.png\",\"datePublished\":\"2023-02-22T13:00:00+00:00\",\"dateModified\":\"2023-08-01T18:09:02+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Espa\u00e7amento entre elementos: como o CSS padding pode ajudar a melhorar a leitura O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site,...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#primaryimage\",\"url\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/carbon-10-1024x252.png\",\"contentUrl\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/carbon-10-1024x252.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS padding: como aumentar a legibilidade do seu conte\u00fado\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS padding: como aumentar a legibilidade do seu conte\u00fado - Fluency.io Brasil","description":"Espa\u00e7amento entre elementos: como o CSS padding pode ajudar a melhorar a leitura O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site,...","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:\/\/homolog.fluency.io\/br\/blog\/css-padding\/","og_locale":"pt_BR","og_type":"article","og_title":"CSS padding: como aumentar a legibilidade do seu conte\u00fado - Fluency.io Brasil","og_description":"Espa\u00e7amento entre elementos: como o CSS padding pode ajudar a melhorar a leitura O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site,...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-02-22T13:00:00+00:00","article_modified_time":"2023-08-01T18:09:02+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/","name":"CSS padding: como aumentar a legibilidade do seu conte\u00fado - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#primaryimage"},"image":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#primaryimage"},"thumbnailUrl":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/carbon-10-1024x252.png","datePublished":"2023-02-22T13:00:00+00:00","dateModified":"2023-08-01T18:09:02+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Espa\u00e7amento entre elementos: como o CSS padding pode ajudar a melhorar a leitura O espa\u00e7amento entre elementos \u00e9 uma parte importante do design de um site,...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#primaryimage","url":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/carbon-10-1024x252.png","contentUrl":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/carbon-10-1024x252.png"},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/css-padding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"CSS padding: como aumentar a legibilidade do seu conte\u00fado"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=118598"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118598\/revisions"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=118598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=118598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=118598"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=118598"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=118598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}