{"id":528,"date":"2020-07-02T22:00:22","date_gmt":"2020-07-03T01:00:22","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=528"},"modified":"2022-12-09T08:36:43","modified_gmt":"2022-12-09T11:36:43","slug":"preenchimento-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/preenchimento-css\/","title":{"rendered":"Preenchimento CSS"},"content":{"rendered":"

As padding propriedades CSS s\u00e3o usadas para gerar espa\u00e7o em torno do conte\u00fado de um elemento, dentro de qualquer borda definida.<\/p>\n

\"\"<\/p>\n

Com CSS, voc\u00ea tem controle total sobre o preenchimento. Existem propriedades para definir o preenchimento para cada lado de um elemento (superior, direito, inferior e esquerdo).<\/p>\n

Preenchimento – Lados Individuais<\/strong>
\nO CSS possui propriedades para especificar o preenchimento para cada lado de um elemento:<\/p>\n

padding-top
\npadding-right
\npadding-bottom
\npadding-left
\nTodas as propriedades do preenchimento podem ter os seguintes valores:<\/p>\n

length<\/code> – especifica um preenchimento em px, pt, cm etc.
\n%<\/code> – especifica um preenchimento em% da largura do elemento que cont\u00e9m
\nherdar<\/code> – especifica que o preenchimento deve ser herdado do elemento pai
\nNota: Valores negativos n\u00e3o s\u00e3o permitidos.<\/p>\n

Exemplo<\/strong>
\nDefina preenchimento diferente para todos os quatro lados de um elemento <div>:<\/p>\n

div {<\/code>
\npadding-top: 50px;<\/code>
\npadding-right: 30px;<\/code>
\npadding-bottom: 50px;<\/code>
\npadding-left: 80px;<\/code>
\n}<\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n  border: 1px solid black;\r\n  background-color: lightblue;\r\n  padding-top: 50px;\r\n  padding-right: 30px;\r\n  padding-bottom: 50px;\r\n  padding-left: 80px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Using individual padding properties<\/h2>\r\n\r\n<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n