adicionando conteúdo de padding e corrigindo linguagem de exemplo da …

…sintaxe-css

.gitignore

@@ -4,6 +4,7 @@ css/fonts/.DS_Store
 .DS_Store
 
 *.scssc
+*.sublime-project
 
 _site/
-_site/*
+_site/*

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>

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;
 }