在使用css給button設定padding樣式時，發現不起作用。直接上代碼：
| 代碼如下 |
複製代碼 |
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body, form, ul, li {margin:0;padding:0;}
body {height:100%;font-family:"微軟雅黑", "黑體";background-color:#298bd2;}
ul{list-style:none;}
.mt-80{margin-top:80px;}
.mt-30{margin-top:30px;}
#userNameIn, #pwdIn, #loginBtn {
display: block;
padding: 25px 30px;
font-size: 40px;
width: 80%;
line-height: 50px;
height: 50px;
color: #333;
background-color: #fff;
border: 0 none;
margin: 0 auto;
}
#userNameIn {
border-radius: 10px 10px 0 0;
border-bottom: 1px solid #ddd;
}
#pwdIn {
border-radius: 0 0 10px 10px;
}
#loginBtn {
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="javascript:;" method="post">
<ul class="mt-80">
<li><input id="userNameIn" type="text" placeholder="使用者名稱" /></li>
<li><input id="pwdIn" type="password" placeholder="密碼" /></li>
<li class="mt-30"><button id="loginBtn" type="button">登入</button></li>
</ul>
</form>
</body>
</html> |
代碼效果如圖。頁面中的登入按鈕與其它兩個輸入框雖然給設定同樣的樣式，但登入按鈕卻沒有被撐起來。
原由：input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button
這些元素的box-sizing屬性被瀏覽器預設設定為border-box;
元素的box-sizing被設定成border-box時，它的內邊距和邊框都被包含到了width和height裡面，就是說它的width和height決定了盒子的高度和寬度。
所以在#loginBtn中添加一條樣式box-sizing: content-box;；或者重新給它設定寬高值即可。正常的效果如下圖：
