block-container-block-start-self-collapsing-item-larger-block-start.html (997B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>margin-trim: block-container-block-start-self-collapsing-item-has-larger-block-start</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-block-start-self-collapsing-item-larger-block-start-ref.html"> 8 <meta name="assert" content="self-collapsing margin at block-start has its block-start margin trimmed which would normally be used in collapsing with container""> 9 <style> 10 container { 11 display: block; 12 margin-trim: block; 13 margin-block-start: 10px; 14 } 15 item { 16 display: block; 17 margin-block-start: 40px; 18 width: 50px; 19 height: 50px; 20 background-color: green; 21 } 22 .collapsed { 23 margin-block-start: 100px; 24 height: 0px; 25 } 26 </style> 27 </head> 28 <body> 29 <item style="margin-block-start: 0px;"></item> 30 <container> 31 <item class="collapsed"></item> 32 <item></item> 33 </container> 34 </body> 35 </html>