“The calc() function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:”
.example {
margin: 10px;
width: calc(100% - 20px);
}
is the width of the viewport by default 100% ?
and shouldn’t the 3rd line of code be
width: calc(100% - 10px);
so width of viewport subtracted from the margin that is 10px ?
Ya, I think the wording on that could be better. 100% width is the available with for the element based on the width of the nearest block level parent. If that parent happens to be as wide as the view port then 100% width will be the same as the width of view port. Otherwise, 100% is only as wide as the parent.
The margin was set to margin: 10px which means that all four margins are 10px so the total side margin is left margin + right margin or 20px.