How to make a tab so that width:100% decreases depending on the margin?

Question

css

Hello, as you know, with the same width: 100%, as the padding increases, the absolute length will decrease. However, how do you get the same effect using margin? So that the block does not float outside the parent, but simply decreases in length

Answer 1

If you do not have a flex layout, then:
1. With an increase in padding, the absolute length will be what??
2. The same effect - what is it?
If you have a block container (div, p, h, which by default have a display: block state), then they take up the entire available width, they do not need to be set to 100%.
If you want to fix the width of the block and add padding to it, then to save the width value add the attribute box-sizing: border-box, because the default value is content-box
If you want to use a margin, you can use a calculated width where the margin should add up to 20px. In this case, such an arrangement of spaces is mandatory. Inside brackets between values ​​and arithmetic sign.
width: calc(100% - 20px)
To reduce confusion, google information about block and inline elements.