<div class="BOX1"><pre>
   .BOX1{
            width: 400px;
            height: 250px;
            padding: 20px;
            margin: 20px;
            border: 20px #484848 solid;
            box-sizing: border-box; /* padding & border 將不影響總 width (寬度) */
            background: #0fb588;
            color:#FFF;
        }
    </pre></div>
    <div class="BOX2"><pre>
       .BOX2{
            width: 600px;
            height: 300px;
            padding: 50px;
            margin: 20px;
            border: 10px #484848 solid;
            box-sizing: border-box; /* padding & border 將不影響總 width (寬度) */
            background: #0fb588;
            color:#FFF;
        }
    </pre></div>
        body{
            padding: 20px;
			background: #eaeaea;
        }
        .BOX1{
            width: 600px; /* 寬度固定 */
            height: 250px; /* 高度固定 */
            padding: 20px;
            margin: 10px auto;
            border: 15px #484848 solid;
            box-sizing: border-box; /* padding & border 將不影響總 width (寬度) */
            background: #0fb588;
            color:#FFF;
        }
        .BOX2{
            width: 600px; /* 寬度固定 */
            height: 250px; /* 高度固定 */
            padding: 10px;
            margin: 10px auto;
            border: 10px #484848 solid;
            box-sizing: border-box; /* padding & border 將不影響總 width (寬度) */
            background: #0fb588;
            color:#FFF;
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.