block-container-non-adjoining-item.html (899B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>margin-trim: block-container-non-adjoining-item</title> 5 <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> 7 <link rel="match" href="block-container-non-adjoining-item-ref.html"> 8 <meta name="assert" content="non-adjoining first child should still have its margins trimmed and the container should keep its set margin"> 9 <style> 10 .container { 11 background-color: green; 12 width: min-content; 13 margin-bottom: 100px; 14 padding-bottom: 50px; 15 background-clip: padding-box; 16 margin-trim: block; 17 } 18 .child { 19 margin-top: 50px; 20 margin-bottom: 200px; 21 width: 100px; 22 height: 50px; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="container"> 28 <div class="child"></div> 29 </div> 30 <div>This text should be 100px below the green square.</div> 31 </body> 32 </html>