JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<title>Пример</title>
<style>
* {
    margin: 0;
    padding: 0;
 }

body {
     border: 1px solid green; 
}

#outer {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid blue;
}
    
#inner {
    display: inline-block;
    vertical-align: bottom;
    width: 200px;
    margin: 200px 0;
    border: 1px solid red;
}

</style>

<div id="outer">
    <div id="inner">
        <h1>Where does extra verical scrolling come from?</h1>
        <p>I expect the height of the document about 400px (2×200px vertical margins) higher than the red block). It is so in FF5, Chrome 12 and even in IE8+ (Win 7 32bit). Only in Opera (including 11.50) the page height is signifcantly higher (extra space below the green frame occurs).</p>
        <p><b>Why?</b></p>
    </div>
</div>