
There are some CSS properties whose values contain numbers, such as `height`, `font-size`, `margin`, `padding`, `width`, etc.
Rather than changing the value manually, we can quickly increase or decrease the value by using one of the following key combinations:

| Key combinations                   | Value change       |
| ---------------------------------- | ------------------ |
| <kbd>↑</kbd>                       | Increase by 1      |
| <kbd>↓</kbd>                       | Decrease by 1      |
| <kbd>alt</kbd> + <kbd>↑</kbd>      | Increase by 0.1    |
| <kbd>alt</kbd> + <kbd>↓</kbd>      | Decrease by 0.1    |
| <kbd>shift</kbd> + <kbd>↑</kbd>    | Increase by 10     |
| <kbd>shift</kbd> + <kbd>↓</kbd>    | Decrease by 10     |
| <kbd>cmd</kbd> + <kbd>↑</kbd>      | Increase by 100    |
| <kbd>cmd</kbd> + <kbd>↓</kbd>      | Decrease by 100    |

On Windows and Linux, the <kbd>cmd</kbd> key should be replaced with the <kbd>ctrl</kbd> key.

<video loop muted controls>
    <source src="/img/increase-decrease-values-devtools.mp4" type="video/mp4">
</video>


Key combinations	Value change
<kbd>↑</kbd>	Increase by 1
<kbd>↓</kbd>	Decrease by 1
<kbd>alt</kbd> + <kbd>↑</kbd>	Increase by 0.1
<kbd>alt</kbd> + <kbd>↓</kbd>	Decrease by 0.1
<kbd>shift</kbd> + <kbd>↑</kbd>	Increase by 10
<kbd>shift</kbd> + <kbd>↓</kbd>	Decrease by 10
<kbd>cmd</kbd> + <kbd>↑</kbd>	Increase by 100
<kbd>cmd</kbd> + <kbd>↓</kbd>	Decrease by 100

Increase or decrease CSS values with Chrome DevTools