Live Demo: Effect of CSS Padding on Element Box Size

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Effect of CSS Padding on Element Box Size</title>
<style>
    div {
        width: 100%;
        padding: 25px;
        background: violet;
    }
</style>
</head>
<body>
    <div>
        <h1>This is a DIV Box</h1>
    </div>
    <p><strong>Notice</strong>, the scrollbar at the bottom of the viewport.</p>
</body>
</html>