css:height:div_100_height_with_padding_margin
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| css:height:div_100_height_with_padding_margin [2021/08/08 12:55] – peter | css:height:div_100_height_with_padding_margin [2021/08/08 12:56] (current) – [Using Calc] peter | ||
|---|---|---|---|
| Line 81: | Line 81: | ||
| There is a new property in CSS3 that you can use to change the way the box model calculates width/ | There is a new property in CSS3 that you can use to change the way the box model calculates width/ | ||
| - | By setting this property with the value "border-box" | + | 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. | If you define something with 100px width, and 10px padding, it will still be 100px wide. | ||
| Line 124: | Line 124: | ||
| <code css> | <code css> | ||
| #myDiv { | #myDiv { | ||
| - | | + | |
| - | height: calc(100% - 5px); | + | height: calc(100% - 5px); |
| - | padding: 5px; | + | padding: 5px; |
| } | } | ||
| </ | </ | ||
| <WRAP info> | <WRAP info> | ||
| - | **NOTE: | + | **NOTE: |
| </ | </ | ||
css/height/div_100_height_with_padding_margin.1628427320.txt.gz · Last modified: 2021/08/08 12:55 by peter