margin-ref.html (1690B)
1 <!DOCTYPE html> 2 <title>CSS Zoom applies to margins</title> 3 <link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-viewport/"> 5 <style> 6 body { 7 --scale: 1; 8 } 9 10 #reference-overlapped-red { 11 background-color: red; 12 width: calc(100px * var(--scale)); 13 height: calc(100px * var(--scale)); 14 z-index: -1; 15 } 16 #reference-overlapped-big-red { 17 background-color: red; 18 width: calc(200px * var(--scale)); 19 height: calc(200px * var(--scale)); 20 z-index: -1; 21 } 22 23 .container { 24 padding: calc(20px * var(--scale)); 25 } 26 .margin-container { 27 width: calc(200px * var(--scale)); 28 margin-left: calc(-50px * var(--scale)); 29 } 30 .margin-big-container { 31 width: 400px; 32 margin-left: -100px /*calc(-100px * var(--scale))*/; 33 } 34 .green-box { 35 background-color: green; 36 width: calc(100px * var(--scale)); 37 height: calc(100px * var(--scale)); 38 font-size: calc(1rem * var(--scale)); 39 display: flex; 40 justify-content: center; 41 align-items: center; 42 text-align: center; 43 margin: auto; 44 margin-top: calc(-100px * var(--scale)); 45 justify-self: right; 46 } 47 .zoom { 48 --scale: 2; 49 } 50 </style> 51 52 <div class="container"> 53 <div id=reference-overlapped-red></div> 54 55 <div class="margin-container"> 56 <div class="green-box">unzoomed</div> 57 </div> 58 </div> 59 60 <div class="container"> 61 <div id=reference-overlapped-big-red></div> 62 63 <div class="margin-big-container"> 64 <div class="green-box zoom">zoomed</div> 65 </div> 66 </div> 67 68 <div class="container zoom"> 69 <div id=reference-overlapped-red></div> 70 71 <div class="margin-container"> 72 <div class="green-box">zoomed inherited</div> 73 </div> 74 </div>