vertical padding for input elements in webkit browsers has no effect

问题

I am unable to set a vertical/top padding for the text/placeholder in input elements.

The following code will work in IE/Firefox/Opera, but not in Safari/Chrome:

CSS:

input
{
 border: 1px solid black;
 height: 100px;
 padding: 70px 25px 10px 25px;
 width: 300px;
}

HTML:

<input type="text" placeholder="Enter text here"/>

The webkit Developer Tools display the metrics as they should be, but the text is still in the middle of the input.

Something similar might be here (unanswered though).

回答1:

Just tested that and its bizzare how Chrome behaves. Could you maybe stick the input in a div and use padding on that?

回答2:

inputs are inline elements. Inline elements don't accept vertical padding.

add: display:block to your CSS, you will then have to add float:left and clear your floats afterwards.

回答3:

I believe there is no way to set vertical padding in Webkit.

Use the height property, to add vertical padding. You may need to use line-height or padding-top/padding-bottom to vertically center the text across browsers.

来源：https://stackoverflow.com/questions/4670498/vertical-padding-for-input-elements-in-webkit-browsers-has-no-effect