How to subtract width in CSS?
For example:
width = 100% - 10px
I'm not talking about padding or margin.
Now with calc the solution will be : width: calc(100% - 10px); Calc can be use with Addition, Subtraction, Multiplication, Division.
CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.
The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box , it sets the width of the border area.
Now with calc the solution will be :
width: calc(100% - 10px);
Calc
can be use with Addition, Subtraction, Multiplication, Division.
Additional note :
Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.
Simple: you can't do this. You'll have to use some workaround.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With