margin и form
Пытаюсь сдвинуть button (b-search) вниз на 3px, но почему-то он спускается и input тоже! Что не так то?
<form> <input class="b3radius" type="text" placeholder="Поиск по сайту"> <button id="b-search"><img src="/style/img/button_search.png"></button> </form> #header-nav form {
float: right;
margin-top: 4px;
margin-right: 8px;
}
#header-nav form input {
height: 25px;
border: none;
background-color: #e8e8e8;
padding: 0px 9px;
width: 152px;
}
#b-search{
border: none;
background: inherit;
}
|
Решил сделать отдельно, посмотреть поведение, ничего не изменилось, по-прежнему вниз съезжают оба элмента. Помогите *-*
<head> <meta charset="utf-8"> <link href="main.css" rel="stylesheet" type="text/css"> </head> <body> <div id="_1"> <div style="display: inline-block;"><input class="b3radius" type="text" placeholder="Поиск по сайту"></div> <div style="display: inline-block; margin-top: 5px;"><button id="b-search"><img src="/style/img/button_search.png"></button></div> </div> </body> * {
margin: 0px;
padding: 0px;
}
body #_1 {
width: 1000px;
height: 35px;
border: 1px solid red;
margin: 0 auto;
}
|
Цитата:
|
Особенности поведения строчных элементов.
#b-search {
vertical-align: top;
/** ... */
}
|
display: inline-block;
заменить на display: block; И лучше не использовать инлайн-стили style="display: inline-block;" Только в крайнем случае, если это действительно нужно. |
Цитата:
(Поддержка браузеров хорошая, единственный недостаток это отступы то бокам при переносе блоков в новую строку) Я считаю что это свойство "Нужно использовать". |
Кhfts_rider, просто потому, что если смешить содержимое документа c его оформлением, то такой код будет тяжелее поддерживать
|
Цитата:
|
| Часовой пояс GMT +3, время: 17:12. |