CODEWITHSUNDEEP
cssinputsubmitsubmit-button
JacobTheDev
JacobTheDev

Reputation: 18520

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:

@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/

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.

Upvotes: 0

Views: 5216

Answers (3)

Leandro Villagran
Leandro Villagran

Reputation: 300

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;
}

Upvotes: 0

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

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. Perhaps not the most clean solution, but at the very least it's a quick work-around.

Upvotes: 1

KatieK
KatieK

Reputation: 13853

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

Upvotes: 4

Related Questions