margin.html (1381B)
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 <link rel="match" href="reference/margin-ref.html"> 6 <style> 7 #reference-overlapped-red { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 z-index: -1; 12 } 13 #reference-overlapped-big-red { 14 background-color: red; 15 width: 200px; 16 height: 200px; 17 z-index: -1; 18 } 19 20 .container { 21 padding: 20px; 22 } 23 .margin-container { 24 width: 200px; 25 margin-left: -50px; 26 } 27 .margin-big-container { 28 width: 400px; 29 margin-left: -100px; 30 } 31 .green-box { 32 background-color: green; 33 width: 100px; 34 height: 100px; 35 display: flex; 36 justify-content: center; 37 align-items: center; 38 text-align: center; 39 margin: auto; 40 margin-top: -100px; 41 justify-self: right; 42 } 43 .zoom { 44 zoom: 2; 45 } 46 </style> 47 48 <div class="container"> 49 <div id=reference-overlapped-red></div> 50 51 <div class="margin-container"> 52 <div class="green-box">unzoomed</div> 53 </div> 54 </div> 55 56 <div class="container"> 57 <div id=reference-overlapped-big-red></div> 58 59 <div class="margin-big-container"> 60 <div class="green-box zoom">zoomed</div> 61 </div> 62 </div> 63 64 <div class="container zoom"> 65 <div id=reference-overlapped-red></div> 66 67 <div class="margin-container"> 68 <div class="green-box">zoomed inherited</div> 69 </div> 70 </div>