Ch. 33 - CSS Theory jonasschmedtmann#3: The CSS Box Model

Author: FrankGecko

starter/03-CSS-Fundamentals/notes/img/element_height_and_width_calculation.png

@@ -165,6 +165,21 @@ <h2>Ch. 32 CSS Theory #2: Inheritance and the Universal Selector</h2>
           can conflict with other selectors.
         </p>
       </article>
+
+      <article>
+        <h2>Ch. 34 CSS Theory #3: The CSS Box Model</h2>
+        <p>
+          The box model defines how elements are displayed, and sized on a webpage.
+        </p>
+        <img src="img/element_height_and_width_calculation.png">
+        <ul>
+          <li><strong>Content Area</strong>: text, images, etc.</li>
+          <li><strong>Padding</strong>: Invisible space around the inside of the element.</li>
+          <li><strong>Border</strong>: A line around the eleent, still inside the element.</li>
+          <li><strong>Margin</strong>: Space outside of the element, between elements.</li>
+          <li><strong>Fill Area</strong>: Its the content area and padding area. This area gets filled with a background color or image.</li>
+        </ul>
+      </article>
     </article>
   </body>
 </html>