From d75597007165bc30eaf2c0264e74ae04a0f893b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafael=20Franc=CC=A7a?= <rafaelfms@gmail.com>
Date: Tue, 4 Mar 2014 12:23:14 -0300
Subject: [PATCH] =?UTF-8?q?adicionando=20conte=C3=BAdo=20de=20padding=20e?=
 =?UTF-8?q?=20corrigindo=20linguagem=20de=20exemplo=20da=20sintaxe-css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                     |  3 +-
 manual/css/margin-padding.html | 92 ++++++++++++++++++++++++++++++----
 manual/css/sintaxe-css.html    |  4 +-
 3 files changed, 86 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index 189da3d..81e96a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ css/fonts/.DS_Store
 .DS_Store
 
 *.scssc
+*.sublime-project
 
 _site/
-_site/*
\ No newline at end of file
+_site/*
diff --git a/manual/css/margin-padding.html b/manual/css/margin-padding.html
index 31c8cbb..ec4d64e 100644
--- a/manual/css/margin-padding.html
+++ b/manual/css/margin-padding.html
@@ -10,7 +10,6 @@ <h2>Manipulando espaços nos elementos</h2>
   <h3>Margin</h3>
   <p>É a margem do elemento, ou seja, o espaçamento externo do elemento.</p>
   <p>Algumas formas de escrita:</p>
-
   <dl>
     <dt>margin-top</dt>
     <dd>
@@ -21,7 +20,6 @@ <h3>Margin</h3>
 }
 </pre>
     </dd>
-
     <dt>margin-right</dt>
     <dd>
       <p>Define a margem direita do elemento.</p>
@@ -31,7 +29,6 @@ <h3>Margin</h3>
 }
 </pre>
     </dd>
-
     <dt>margin-bottom</dt>
     <dd>
       <p>Define a margem inferior do elemento.</p>
@@ -41,27 +38,102 @@ <h3>Margin</h3>
 }
 </pre>
     </dd>
-
     <dt>margin-left</dt>
     <dd>
       <p>Define a margem esquerda do elemento.</p>
 <pre class="lang-css prettyprint linenums">
 div {
-  margin-bottom: 40px;
+  margin-left: 40px;
 }
 </pre>
     </dd>
-
     <dt>margin</dt>
     <dd>
-      <p>Define a margem inferior do elemento.</p>
+      <p>Define a margem do elemento. Este tipo de declaração pode ser dar de diversas formas.</p>
+<pre class="lang-css prettyprint linenums">
+/* t = topo; d = direita; b = baixo; e = esquerda; */
+.div1 {
+  /* t = 20px; d = 20px; b = 20px; e = 20px; */
+  margin: 20px;
+}
+.div2 {
+  /* t = 10px; d = 20px; b = 10px; e = 20px; */
+  margin: 10px 20px;
+}
+.div3 {
+  /* t = 10px; d = 20px; b = 30px; e = 20px; */
+  margin: 10px 20px 30px;
+}
+.div4 {
+  /* t = 10px; d = 20px; b = 30px; e = 40px; */
+  margin: 10px 20px 30px 40px;
+}
+</pre>
+    </dd>
+  </dl>
+  <h3>Padding</h3>
+  <p>É o preenchimento do elemento, ou seja, o espaçamento interno do elemento.</p>
+  <p>Algumas formas de escrita:</p>
+  <dl>
+    <dt>padding-top</dt>
+    <dd>
+      <p>Define o preenchimento superior do elemento.</p>
 <pre class="lang-css prettyprint linenums">
 div {
-  margin-bottom: 20px;
+  padding-top: 10px;
+}
+</pre>
+    </dd>
+    <dt>padding-right</dt>
+    <dd>
+      <p>Define o preenchimento direito do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  padding-right: 20px;
+}
+</pre>
+    </dd>
+    <dt>padding-bottom</dt>
+    <dd>
+      <p>Define o preenchimento inferior do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  padding-bottom: 30px;
+}
+</pre>
+    </dd>
+    <dt>padding-left</dt>
+    <dd>
+      <p>Define o preenchimento esquerdo do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  padding-left: 40px;
+}
+</pre>
+    </dd>
+    <dt>padding</dt>
+    <dd>
+      <p>Define o preenchimento geral do elemento. Assim como na margem, o padding pode declarado de várias formas.</p>
+<pre class="lang-css prettyprint linenums">
+/* t = topo; d = direita; b = baixo; e = esquerda; */
+.div1 {
+  /* t = 20px; d = 20px; b = 20px; e = 20px; */
+  padding: 20px;
+}
+.div2 {
+  /* t = 10px; d = 20px; b = 10px; e = 20px; */
+  padding: 10px 20px;
+}
+.div3 {
+  /* t = 10px; d = 20px; b = 30px; e = 20px; */
+  padding: 10px 20px 30px;
+}
+.div4 {
+  /* t = 10px; d = 20px; b = 30px; e = 40px; */
+  padding: 10px 20px 30px 40px;
 }
 </pre>
     </dd>
-
   </dl>
-  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+    <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
 </article>
diff --git a/manual/css/sintaxe-css.html b/manual/css/sintaxe-css.html
index 643cab6..8fe5c8f 100644
--- a/manual/css/sintaxe-css.html
+++ b/manual/css/sintaxe-css.html
@@ -10,7 +10,7 @@ <h2>Como escrever código CSS</h2>
 
   <h3>Sintaxe</h3>
   <p>Para escrever código CSS é necessário seguir uma regra. A regra é uma declaração que possui uma sintaxe própria bem simples que define a forma com que o estilo será aplicado aos nossos elementos HTML. Você pode ver a regra a seguir:</p>
-<pre class="lang-html prettyprint linenums">
+<pre class="lang-css prettyprint linenums">
 seletor{
   propriedade: valor;
 }
@@ -23,7 +23,7 @@ <h3>Sintaxe</h3>
 
   <h3>Exemplificando</h3>
   <p>Vamos para um exemplo:</p>
-<pre class="lang-html prettyprint linenums">
+<pre class="lang-css prettyprint linenums">
 body{
   background-color: #000;
 }