{"id":522,"date":"2020-07-02T21:56:54","date_gmt":"2020-07-03T00:56:54","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=522"},"modified":"2022-12-09T08:36:55","modified_gmt":"2022-12-09T11:36:55","slug":"margens-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/margens-css\/","title":{"rendered":"Margens CSS"},"content":{"rendered":"

As margin propriedades CSS s\u00e3o usadas para criar espa\u00e7o em torno dos elementos, fora de quaisquer bordas definidas.<\/p>\n

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

\"\"<\/p>\n

Margem – Lados Individuais<\/strong>
\nO CSS possui propriedades para especificar a margem para cada lado de um elemento:<\/p>\n

margin-top
\nmargin-right
\nmargin-bottom
\nmargin-left<\/p>\n

Todas as propriedades da margem podem ter os seguintes valores:<\/p>\n

auto<\/strong> – o navegador calcula a margem
\nlength<\/strong> – especifica uma margem em px, pt, cm etc.
\n% –<\/strong> especifica uma margem em% da largura do elemento que cont\u00e9m
\nherdar<\/strong> – especifica que a margem deve ser herdada do elemento pai<\/p>\n

Dica: Valores negativos s\u00e3o permitidos.<\/span><\/p>\n

Exemplo<\/strong>
\nDefina margens diferentes para todos os quatro lados de um elemento <p>:<\/p>\n

p {<\/code>
\nmargin-top: 100px;<\/code>
\nmargin-bottom: 100px;<\/code>
\nmargin-right: 150px;<\/code>
\nmargin-left: 80px;<\/code>
\n}<\/code><\/p>\n

 <\/p>\n

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


<\/center>\n
\"\"<\/p>\n
 <\/p>\n
Margem – Propriedade taquigr\u00e1fica<\/strong>
\nPara encurtar o c\u00f3digo, \u00e9 poss\u00edvel especificar todas as propriedades da margem em uma propriedade.<\/p>\n
A margin propriedade \u00e9 uma propriedade abreviada para as seguintes propriedades de margem individuais:<\/p>\n
margin-top<\/code>
\nmargin-right<\/code>
\nmargin-bottom<\/code>
\nmargin-left<\/code><\/code>E<\/p>\n
Ent\u00e3o, aqui est\u00e1 como isso funciona:<\/strong><\/p>\n
Se a margin propriedade tiver quatro valores:<\/p>\n
margem: 25px 50px 75px 100px;
\na margem superior \u00e9 de 25 px
\nmargem direita \u00e9 50px
\nmargem inferior \u00e9 75px
\nmargem esquerda \u00e9 100px<\/p>\n
Exemplo<\/strong><\/p>\n
Use a propriedade abreviada da margem com quatro valores:<\/p>\n
p {<\/code>
\nmargin: 25px 50px 75px 100px;<\/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  margin: 25px 50px 75px 100px;\r\n  background-color: lightblue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The margin shorthand property - 4 values<\/h2>\r\n\r\n<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.<\/div>\r\n\r\n<hr>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Se a margin propriedade tiver tr\u00eas valores:<\/strong><\/p>\n
margem: 25px 50px 75px;
\na margem superior \u00e9 de 25 px
\nas margens direita e esquerda t\u00eam 50 px
\nmargem inferior \u00e9 75px<\/p>\n
Exemplo<\/strong>
\nUse a propriedade abreviada da margem com tr\u00eas valores:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n  border: 1px solid black;\r\n  margin: 25px 50px 75px;\r\n  background-color: lightblue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The margin shorthand property - 3 values<\/h2>\r\n\r\n<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.<\/div>\r\n\r\n<hr>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
Se a margin propriedade tiver dois valores:<\/strong><\/p>\n
margem: 25px 50px;
\nas margens superior e inferior t\u00eam 25px
\nas margens direita e esquerda t\u00eam 50 px
\nExemplo
\nUse a propriedade abreviada da margem com dois valores:<\/p>\n
p {<\/code>
\nmargin: 25px 50px;<\/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  margin: 25px 50px;\r\n  background-color: lightblue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The margin shorthand property - 2 values<\/h2>\r\n\r\n<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.<\/div>\r\n\r\n<hr>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
O valor autom\u00e1tico<\/strong><\/p>\n
Voc\u00ea pode definir a propriedade de margem auto para centralizar horizontalmente o elemento em seu cont\u00eainer.<\/p>\n
O elemento ocupar\u00e1 a largura especificada e o espa\u00e7o restante ser\u00e1 dividido igualmente entre as margens esquerda e direita.<\/p>\n
Exemplo<\/strong>
\nUsar margem: auto:<\/p>\n
div {<\/code>
\nwidth: 300px;<\/code>
\nmargin: auto;<\/code>
\nborder: 1px solid red;<\/code>
\n}<\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n  width:300px;\r\n  margin: auto;\r\n  border: 1px solid red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Use of margin:auto<\/h2>\r\n<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:<\/p>\r\n\r\n<div>\r\nThis div will be horizontally centered because it has margin: auto;\r\n<\/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