Q: button всегда ниже input Вот что не делал, пробовал уже 1000 способов, но банальный код:
<input type='text'><button>Кнопка</button>

Button при любых параметрах оказывается ниже input на 2-3 пикселя. Помогает только запирание тегов в таблице. Что можно сделать? При установке margin на один из них, смещаются оба элемента.

A: На самом деле элементы формы в любом случае будут располагаться в строку. То, как вы это запишете (см. ниже) не влияет на результат:
<input type="text">
<button>Кнопка</button>

или
<input type="text"><button>Кнопка</button>

Если же у вас, по каким-либо причинам элементы идут один под одним, то, скорее всего, где-то в коде ранее было указано отображать элементы формы блочно. То есть:
form * {
    display: block;
{

или вовсе
* {
    display: block;
}

[paranoya mode="on]
Либо вы используете какой-то паленый браузер (либо расширение в браузере), который неявно заставляет отображаться элементы формы блочно.
[/paranoya]
А теперь сравните:


<p>
  <input type="text">
  <button>Кнопка</button>
</p>

<p>
  <input type="text"><button>Кнопка</button>
</p>

<p>
  <button>Кнопка</button>
  <input type="text">
</p>

<p>
  <button>Кнопка</button><input type="text">
</p>


Заметьте, что, как бы я не написал, элементы все равно отображаются строчно (меняется только порядок). А еще во втором и четвертом случае исчез пробел между полем и кнопкой, так как мы его явно убрали (в первом случае пробел добавил перенос строки, что еще раз наглядно дает понять, что "Enter" не переносит строку, а лишь вставляет пробел).
Вывод: ничто кроме CSS-стилизации не влияет на отображение элементов. Вы можете как писать в строку, так и разделять код "Enter'ами" (что более предпочтительно). "Enter" в последующем лишь заменяется пробелом. Поэтому.


*

*Либо у вас где-то определено, что элементы отображаются блочно (что и приводит к переносу на новую строку).

*Либо вы используете какой-то весьма странный браузер (расширение для него), которое отображает элементы формы блочно (опять же - это настолько маловероятно, насколько вообще может быть).


Итого: предоставьте более полный код или дайте ссылку на рабочий (в вашем случае нерабочий) пример, чтобы можно было делать какие-либо более обоснованные выводы.

A: 

<input style="display: inline-block; height:40px;" type="text">
<button style="height:40px;">Кнопка</button>



A: 

div {
 white-space:nowrap;
  
}
<div>
<input type="text" />
<button type="button">button</button>
<input type="text" />
<button type="button">button</button>
<input type="text" />
<button type="button">button</button>
<input type="text" />
<button type="button">button</button>
<input type="text" />
<button type="button">button</button>
<input type="text" />
<button type="button">button</button>
<input type="text" />
<button type="button">button</button>
<input type="text" />
<button type="button">button</button>

</div>



A: <input> и <button> при настройках по-умолчанию отображаются чаще всего одинаково. однако, как мне кажется, тут многое зависит от браузера. Лучше сразу подключать normalize.css - это набор правил, который принудительно приводит элементы на страницы к общему виду, переписывая предустановленные браузерами значения.
Что касается вашего случая, если нужно указать высоту-ширину элементов, не забудьте так же про свойство box-sizing: border-box; для этих элементов. Дело в том, что по-умолчанию заданные вами значения width и height указывают размер контента блока, без учёта отступов и толщины border. 


input, button {
  height: 42px;
  border: 1px solid #000;
  padding-top: 2px;
  padding-bottom: 2px;
  box-sizing: border-box;
}
<input type="text" />
<button type="button">button</button>


кроме того, я прописал им одинаковые значения border и padding, потому как по-умолчанию Firefox рисует <input>как border: 1px; padding 2px; а <button> как border: 3px; padding: 0 6px;

A: Выход я нашел, оказался не таким простым - одинаковый line-height для input и button =)
