當你設定一個元素樣式為 box-sizing: border-box;，這個元素的內距和邊框將不會增加元素本身的寬度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test box-sizing</title>
<style>
.simple {
width: 500px;
margin: 20px auto;
border: solid red 40px;
/*-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;*/
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
/*-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="simple">我們現在一樣大小了！
</div>
<div class="fancy">喔耶！</div>
</body>
</html>
时间： 2024-10-24 14:57:44