baseline-block-with-overflow-001.html (1269B)
1 <!DOCTYPE html> 2 <title>CSS Test: Baseline of blocks with `overflow: hidden`</title> 3 <link rel="match" href="baseline-block-with-overflow-001-ref.html"> 4 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align"> 5 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 6 <style> 7 section { 8 margin-bottom: 1px; 9 } 10 .outer { 11 display: inline-block; 12 background: orange; 13 padding-bottom: 20px; 14 } 15 .inner { 16 width: 30px; 17 height: 30px; 18 overflow: hidden; 19 background: blue; 20 } 21 .inline-block { 22 display: inline-block; 23 } 24 .margin-bottom { 25 margin-bottom: 30px; 26 } 27 </style> 28 <body> 29 <section> 30 <div class="outer"> 31 <div class="inner inline-block"> 32 </div> 33 </div> 34 XX 35 </section> 36 <section> 37 <div class="outer"> 38 <div class="inner"> 39 </div> 40 </div> 41 XX 42 </section> 43 <section> 44 <div class="outer"> 45 <div class="inner"> 46 XX 47 </div> 48 </div> 49 XX 50 </section> 51 <section> 52 <div class="outer"> 53 <div class="inner margin-bottom inline-block"> 54 XX 55 </div> 56 </div> 57 XX 58 </section> 59 <section class="margin-bottom"> 60 <div class="outer"> 61 <div class="inner margin-bottom"> 62 XX 63 </div> 64 </div> 65 XX 66 </section> 67 </body>