Jump to content
  • 0

Как формируется высота input?


shvv
 Share

Question

Во время верстки макета http://shvv.freehostia.com/uta/index.html серьезно помучался с высотой поля ввода и кнопки. В итоге пришел к следующему варианту

 input {
font-size: 13px;
vertical-align: middle;
}

input.text {
width: 175px;
padding: 6px 0;
margin-right: 5px;
}

input.search {
height: 29px;
width: 32px;
}

, где .text - класс поля ввода, .search - класс кнопки. Получается, что высота текстового поля формируется как font-size+padding-top+padding-bottom+2*2px. Такой вариант вроде бы работает во всех браузерах одинаково. Где можно точно прочитать о высоте текстового поля.

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
Запомни на будущее, никогда не задавай жёсткую высоту импутам, подгоняй всегда паддингами!

Я как раз хотел написать об этом разделе"Обсуждение". Просто в твоем варианте с подгонами паддингами требуются отдельные стили для IE8 и IE7.

А в моем варианте - во всех браузерах работает одинаково.

Что скажешь?

Edited by shvv
Link to comment
Share on other sites

  • 0
Я как раз хотел написать об этом разделе"Обсуждение". Просто в твоем варианте с подгонами паддингами требуются отдельные стили для IE8 и IE7.

А в моем варианте - во всех браузерах работает одинаково.

Что скажешь?

да ничего не скажу, просто я бы высоту жёсткую никогда не ставил для импутов дабы избежать проблем в будущем

Link to comment
Share on other sites

  • 0
Но если я задал высоту в px, то ее можно изменить только через css.

я пробовал сделать шрифт больше в браузере ФФ, у меня получилось и в Сафари тоже ;)

Edited by psywalker
Link to comment
Share on other sites

  • 0
я пробовал сделать шрифт больше в браузере ФФ, у меня получилось и в Сафари тоже ;)

Получилось что?

Я хотел сказать, что при измении шрифта через настройки браузера изменится только заданное в em. А заданное в px - нет. Поэтому внешний вид формы в этом случае не изменится.

Или я что-то не понял?

Link to comment
Share on other sites

  • 0
Получилось что?

Я хотел сказать, что при измении шрифта через настройки браузера изменится только заданное в em. А заданное в px - нет. Поэтому внешний вид формы в этом случае не изменится.

Или я что-то не понял?

Неважно в чём задаёшь, всё равно изменится высота, проверь сам

Link to comment
Share on other sites

  • 0
Неважно в чём задаёшь, всё равно изменится высота, проверь сам

Когда я захожу в ФФ: Настройки - шрифты и цвета - и меняю высоту из выпадающего меню, то что было в пикселях не меняется. ;)

Link to comment
Share on other sites

  • 0
ФФ - Инструменты - Настройки - Вкладка "Содержание" - Дополнительно - Наименьший размер шрифта - ставишь самый большой "24"

Точно. Не знал об этом.

Да правда все это запутывает еще больше.

Но играться с отступами - это конечно очень весело.

Link to comment
Share on other sites

  • 0
Точно. Не знал об этом.

Да правда все это запутывает еще больше.

Но играться с отступами - это конечно очень весело.

Я тоже помню раньше высоту задавал жёсткую, думал это чётко, а потом ситуации разные были и бывало что из-за этого символы уходили под нижний бордер, было неприятное зрелище...после только узнал, что лучше всё паддингами подгонять ;)

Link to comment
Share on other sites

  • 0
Я тоже помню раньше высоту задавал жёсткую, думал это чётко, а потом ситуации разные были и бывало что из-за этого символы уходили под нижний бордер, было неприятное зрелище...после только узнал, что лучше всё паддингами подгонять ;)

А как подбираешь: наугад? или есть правила?

Link to comment
Share on other sites

  • 0
А как подбираешь: наугад? или есть правила?

Нет, правил нет, просто подбираю по ситуации, чтобы всё ровненько было, потом ставлю размер шрифта большой,опять проверяю и т. д., вобщем стараюсь довести до ума ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy