diff --git a/src/003-box-sizing/example/example.css b/src/003-box-sizing/example/example.css index eba1d66..e9ee0bb 100644 --- a/src/003-box-sizing/example/example.css +++ b/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; + } \ No newline at end of file diff --git a/src/003-box-sizing/example/index.html b/src/003-box-sizing/example/index.html index 9c2f4a4..2f3c114 100644 --- a/src/003-box-sizing/example/index.html +++ b/src/003-box-sizing/example/index.html @@ -35,26 +35,26 @@
-
+

Box Model

-
+

Since the dawn of CSS, the box model has worked like this by default:

width + padding + border = actual visible/rendered width of an element's box

height + padding + border = actual visible/rendered height of an element's box

-
+

Box Sizing : Content Box

-
+

Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

-
+

Box Sizing : border-box

-
+

The width and height properties (and min/max properties) includes content, padding and border, but not the margin