Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS width subtraction

Tags:

css

How to subtract width in CSS?

For example:

width = 100% - 10px 

I'm not talking about padding or margin.

like image 931
Jeaf Gilbert Avatar asked Sep 29 '10 08:09

Jeaf Gilbert


People also ask

How do you subtract width in CSS?

Now with calc the solution will be : width: calc(100% - 10px); Calc can be use with Addition, Subtraction, Multiplication, Division.

What does Calc mean in CSS?

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.

What is the width in CSS?

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.


2 Answers

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.

like image 148
mpgn Avatar answered Oct 08 '22 19:10

mpgn


Simple: you can't do this. You'll have to use some workaround.

like image 42
Peter Avatar answered Oct 08 '22 19:10

Peter