baseline-block-with-overflow-001-ref.html (1072B)
1 <!DOCTYPE html> 2 <style> 3 section { 4 margin-bottom: 1px; 5 } 6 .outer { 7 display: inline-block; 8 background: orange; 9 padding-bottom: 20px; 10 } 11 .inner { 12 width: 30px; 13 height: 30px; 14 overflow: hidden; 15 background: blue; 16 } 17 .inline-block { 18 display: inline-block; 19 } 20 .margin-bottom { 21 margin-bottom: 30px; 22 } 23 </style> 24 <body> 25 <section> 26 <div class="outer"> 27 <div class="inner inline-block"> 28 </div> 29 </div> 30 XX 31 </section> 32 <section> 33 <div class="outer" style="height: 30px"> 34 <div class="inner inline-block"> 35 </div> 36 </div> 37 XX 38 </section> 39 <section> 40 <div class="outer" style="height: 30px"> 41 <div class="inner inline-block"> 42 XX 43 </div> 44 </div> 45 XX 46 </section> 47 <section> 48 <div class="outer"> 49 <div class="inner margin-bottom inline-block"> 50 XX 51 </div> 52 </div> 53 XX 54 </section> 55 <section class="margin-bottom"> 56 <div class="outer" style="height: 60px"> 57 <div class="inner margin-bottom inline-block"> 58 XX 59 </div> 60 </div> 61 XX 62 </section> 63 </body>