<!DOCTYPE html>
<html>
<head>
    <style>
        * { box-sizing: border-box; }
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        .box { background: white; border-radius: 12px; margin: 15px 0; }
        .box1 { padding: 10px; border: 2px solid #2E86AB; margin: 10px; }
        .box2 { padding: 30px; border: 4px dashed #E84D3D; margin: 20px; }
        .box3 { padding: 20px; border: 3px solid #27AE60; margin: 0 auto; width: 300px; text-align: center; }

        .demo { background: #1B3A5C; color: white; padding: 40px; margin: 20px; border: 5px solid #D4A533; border-radius: 16px; text-align: center; position: relative; }
        .demo::after { content: 'margin: 20px | border: 5px | padding: 40px'; position: absolute; bottom: 5px; left: 0; right: 0; font-size: 11px; opacity: 0.7; }
    </style>
</head>
<body>
    <h2>Box Model</h2>
    <div class="box box1">Padding: 10px, Border: 2px, Margin: 10px</div>
    <div class="box box2">Padding: 30px, Border: 4px, Margin: 20px</div>
    <div class="box box3">Markazlashgan quti (width: 300px, margin: 0 auto)</div>
    <div class="demo">KONTENT</div>
</body>
</html>