CSS 2.1 - visual formatting model - horizontal formatting - negative margins скачать в хорошем качестве

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