<!DOCTYPE HTML> <title>Test that overflowing margins and padding on scrollable element add</title> <style> #scroll { overflow: scroll; background: yellow; height: 111px; width: 116px; } #content { height: 223px; margin-right: 5px; margin-left: 11px; background: aqua; } #gap { /* In test file: #content's margin-bottom: 35px + #scroll's padding-bottom: 7px */ height: 42px; } </style> <div id="scroll"><div id="content"></div><div id="gap"></div></div> <script> document.getElementById("scroll").scrollTop = "1000"; </script>