本文章来给各位同学介绍一个css给button按钮设置padding样式无效解决办法，如果你碰到此问题不防进入参考一下哦。
在使用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;；或者重新给它设定宽高值即可。正常的效果如下图：
