Differences

This shows you the differences between two versions of the page.

--- css:height:div_100_height_with_padding_margin [2021/08/08 12:54] – created peter
+++ css:height:div_100_height_with_padding_margin [2021/08/08 12:56] (current) – [Using Calc] peter
@@ Line 17: / Line 17: @@
 ===== Solution =====
-**display:block** is the default display value for a div, but I like to make it explicit.
+**display:block** is the default display value for a div, but **display:explicit** is also good.
 The container has to be the right type; position attribute is fixed, relative, or absolute.
@@ Line 81: / Line 81: @@
 There is a new property in CSS3 that you can use to change the way the box model calculates width/height, it's called box-sizing.
-By setting this property with the value "border-box" it makes whichever element you apply it to not stretch when you add a padding or border.
+By setting this property with the value **border-box** it makes whichever element you apply it to not stretch when you add a padding or border.
 If you define something with 100px width, and 10px padding, it will still be 100px wide.
@@ Line 124: / Line 124: @@
 <code css>
 #myDiv {
-    width: calc(100% - 5px);
+  width: calc(100% - 5px);
-    height: calc(100% - 5px);
+  height: calc(100% - 5px);
-    padding: 5px;
+  padding: 5px;
 }
 </code>
 <WRAP info>
-**NOTE:**  Don't forget the space between the values and the operator (e.g. (100%-5px) that will break the syntax.
+**NOTE:**  Do not forget the space between the values and the operator (e.g. (100%-5px) that will break the syntax.
 </WRAP>