003 - Box Sizing

src/003-box-sizing/example/example.css

@@ -1,5 +1,47 @@
 /*
  * Practice : Box Sizing
  * Version: 1
- * By: xxx
+ * By: Laura Alvarez
  */
+ * {
+ 	box-sizing: border-box;
+ }
+
+ p {
+ 	line-height: 20px;
+ 	margin: 2px;
+ }
+
+ h3 {
+ 	margin: 0;
+ 	padding-bottom: 15px;
+ }
+
+ .content-box {
+ 	box-sizing: content-box;
+ }
+
+ .border-box {
+ 	box-sizing: border-box;
+ }
+
+ .gray-box {
+  	margin: 0 0 2rem 0;
+  	padding: 2rem 1rem;
+  	background: #eee;
+ }
+
+ .red-box {
+ 	border: 2px solid red;
+ 	padding: 15px;
+ 	margin-left: 15px;
+ 	margin-right: 15px;
+ }
+
+ .width-borderbox {
+ 	max-width: 440px;
+ }
+
+ .width-contentbox {
+ 	max-width: 480px;
+ }

src/003-box-sizing/example/index.html

@@ -35,26 +35,26 @@
 
       <div>
 
-        <div>
+        <div class="gray-box">
           <h3> Box Model </h3>
-          <div>
+          <div class="red-box width-contentbox ">
             <p>Since the dawn of CSS, the box model has worked like this by default:</p>
             <p>width + padding + border = actual visible/rendered width of an element's box</p>
             <p>height + padding + border = actual visible/rendered height of an element's box</p>
           </div>
         </div>
 
-        <div>
+        <div class="content-box gray-box">
           <h3>Box Sizing : Content Box </h3>
-          <div>
+          <div class="red-box width-contentbox ">
             <p>Default. The width and height properties (and min/max properties) includes only the content. Border,
               padding, or margin are not included</p>
           </div>
         </div>
 
-        <div class="bs-example">
+        <div class="border-box gray-box">
           <h3>Box Sizing : border-box </h3>
-          <div>
+          <div class="red-box width-borderbox">
             <p>The width and height properties (and min/max properties) includes content, padding and border, but not
               the margin</p>
           </div>