CSS 2.1 - visual formatting model - horizontal formatting - negative margins
https://www.w3.org/TR/CSS21/visufx.html
1. Scenario : negative margin-right (no borders)
Rule: total of 7 horizontal properties (margin left, padding
left, border left, width, padding right , border right, margin
right) should always equal to parent width.
What happens here is width: auto gets converted by the
browser into width: 330px This 330px width is need to make p width equal to width of containing block - div
The calculation of width for p element is as follows
10px + 0 + 0 + 330px + 0 + 0 - 40px = 300px
div {width: 300px; margin: 15% auto; border:1px solid green;}
p {margin-left: 10px; width: auto; margin-right: -40px;
background-color: rgb(187, 221, 137);}
*********************************************
2. Scenario : negative margin-right (with borders)
What happens here is width: auto gets converted by the
browser into width: 326px. This 326px width is need to make p width equal to width of containing block - div
The calculation of width for p element is as follows
10px + 2px + 0 + 326px + 0 + 2px - 40px = 300px
div {width: 300px; margin: 15% auto; border:1px solid
green;}
p {margin-left: 10px; width: auto; margin-right: -40px;
border: 2px solid black; background-color: rgb(187, 221,
137);}
*********************************************
3. Scenario : auto margin evaluates to negative value
(margin-right: auto;)
When calculating width of p in this example margin-right
auto gets negative value of -114px
The calculation of width for p element is as follows
10px + 2px + 0 + 400px + 0 + 2px - 114px = 300px