[英]Extra Padding on top of Submit Button
I can't get rid of the extra padding on top of a submit button. 我无法摆脱提交按钮上方的多余填充。 I've tried everything from adjusting the height, to line-height, to padding, to margin, nothing seems to work.
我已经尝试了从调整高度到行高,填充到边距的所有方法,似乎没有任何效果。 Basically, instead of the "go" text showing up in the bottom of the field, I want it to be centered, and I just can't figure out how to do it.
基本上,我希望将其居中,而不是在字段底部显示“开始”文本,而我不知道该怎么做。
CSS: CSS:
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:700);
input[type=submit] {
background: #CDA91B;
border: 0;
color: #FFF;
font-family: "Libre Baskerville", Libre Baskerville, Times New Roman, Times, serif;
font-size: 20px;
font-weight: 700;
height: 25px;
margin: 0;
padding: 0;
text-transform: lowercase;
vertical-align: top;
/* css3 */
-webkit-transition: background 0.25s;
-moz-transition: background 0.25s;
-ms-transition: background 0.25s;
-o-transition: background 0.25s;
transition: background 0.25s;
}
input[type=submit]:hover {
background: #E5BE1E;
cursor: pointer;
}
Demo: 演示:
http://jsfiddle.net/Y3Pfj/ http://jsfiddle.net/Y3Pfj/
UPDATE: I realize it's part of the font, I just used "Padding" to describe the area. 更新:我意识到这是字体的一部分,我只是使用“填充”来描述区域。 Obviously it's not actually padding.
显然,它实际上不是填充。
Additionally, the button needs to be the same height as it is now. 此外,按钮的高度必须与现在相同。 I'm starting to think I may have to just make a background image, unfortunately.
不幸的是,我开始认为我可能只需要制作背景图像。
That's not padding - it's part of the area created by the text. 那不是填充-它是文本创建的区域的一部分。 You can see this if you disable the
text-transform: lowercase;
如果禁用
text-transform: lowercase;
则可以看到以下text-transform: lowercase;
specification. 规格。
If you really need that text to appear inside the button, try adding another element, and then positioning the text up by half an em or so. 如果确实需要该文本显示在按钮内,请尝试添加其他元素,然后将文本向上放置半em左右。
try this. 尝试这个。 i added line-height and padding
我添加了行高和填充
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:700);
input[type=submit] {
background: #CDA91B;
border: 0;
color: #FFF;
font-family: "Libre Baskerville", Libre Baskerville, Times New Roman, Times, serif;
font-size: 20px;
font-weight: 700;
line-height: 12px;
margin: 0;
padding: 25px;
text-transform: lowercase;
/* css3 */
-webkit-transition: background 0.25s;
-moz-transition: background 0.25s;
-ms-transition: background 0.25s;
-o-transition: background 0.25s;
transition: background 0.25s;
}
input[type=submit]:hover {
background: #E5BE1E;
cursor: pointer;
}
Remove the static height you set on the button. 删除您在按钮上设置的静态高度。 Instead use padding and use a lower value for the top padding.
而是使用填充,并为顶部填充使用较低的值。
padding: 0 0 5px;
In addition to the other CSS you're using should give you a 25px high button. 除了您使用的其他CSS外,还应该为您提供25px高的按钮。 Perhaps not the most clean solution, but at the very least it's a quick work-around.
也许这不是最干净的解决方案,但至少是一个快速的解决方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.