<!DOCTYPE html> <title>CSS Test: Baseline of blocks with `overflow: hidden`</title> <link rel="match" href="baseline-block-with-overflow-001-ref.html"> <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align"> <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> <style> section { margin-bottom: 1px; } .outer { display: inline-block; background: orange; padding-bottom: 20px; } .inner { width: 30px; height: 30px; overflow: hidden; background: blue; } .inline-block { display: inline-block; } .margin-bottom { margin-bottom: 30px; } </style> <body> <section> <div class="outer"> <div class="inner inline-block"> </div> </div> XX </section> <section> <div class="outer"> <div class="inner"> </div> </div> XX </section> <section> <div class="outer"> <div class="inner"> XX </div> </div> XX </section> <section> <div class="outer"> <div class="inner margin-bottom inline-block"> XX </div> </div> XX </section> <section class="margin-bottom"> <div class="outer"> <div class="inner margin-bottom"> XX </div> </div> XX </section> </body>