<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.