Ułożenie inputów w divie

Czy ktoś byłby w stanie wyjaśnić mi dlaczeg inputy umieszczone w divie wyłażą z niego w jakiś dziwny sposób? Zgodnie z obliczeniami powinny zmieścić się w środku a tymczasem wyłazi na zewnątrz. Jestem niezmiernie ciekaw dlaczego tak się dzieje.
Kod:

<div style="display:inline-block; width: 300px; height:30px; border:1px solid black;">
	   <form style="margin:0; padding:0; width:298px;">
	        <input type="submit" value="" style="width:29px; height:28px; border:1px solid red; margin:0; padding:0;">
			<input type="search" value="" style="width:269px; height:28px; border:1px solid green; margin:0; padding:0;">
		 </form>
	   </div>

aj ziomek, jak ma wyglądać jak div jest mniejszy od inputów, a przy margin padding nie masz "px" nie wspominając że mają zerową wartość...

tutaj masz customowy search box:
http://shipow.github.io/searchbox/
i nie wpisuj styli do html tylko w oddzielnym pliku css dude;

Najwyraźniej zapomniałem napisać, że ustawiłem box-sizing: border-box.
Jeżeli wziąć to pod uwagę no to 300 > 29 + 269 przecież i tak samo 30 > 28. Dlatego nie czaję co jest grane.

Poza tym wydaje mi się dziwne pisanie 0px. Tak na chłopski rozum jeżeli będzie 0px to czy to się czymkolwiek różni od np. 0% ? Ustawiłem to tak na wszelki wypadek.

A style wewnątrz html'a wstawiłem tak na szybkiego w celach badawczo-treningowo, demonstracyjnych.

W ten sposób działają elementy z inline-block

Zwykle, gdy używasz elementy z inline-block, często używasz ich wewnątrz akapitu, więc odstęp pomiędzy literami musi być zachowany.inline-block również stosuje się do tej zasady.

Widzę więc 3 rozwiązania:

• Usuń spację pomiędzy input i nie będziesz miał dodatkowych pixeli więc będą w jednej linii (zmieszczą się).
• użyj font-size z wartością 0
• użyj float zamiast inline-block

Nie wiem z czym masz problem, tak jak kolega napisał wyżej, wywal wysokość dla div-a (elementy w formie mają prawie 60px) i będzie ok.

Wysokość nie ma tu nic do rzeczy.

Odniosłem się do odpowiedzi kolegi "Czyste skarpety".
Wysokość ma jak najbardziej znaczenie, div ma 30px, elementy w środku mają prawie 60px, dlatego wychodzą poza główny kontener.

Faktycznie, źle zrozumiałem intencje autora.
Do autora wątku, tutaj masz gotowy kod, tylko pozamykaj to klasy.
Jeśli zdecydowałbyś się jednak przejść na float-y, pamiętaj o czyszczeniu oblewania, żeby elementy nie zaczęły Ci dziwnie pływać.

<div style="width:303px; border:1px solid black;">
   <form style="padding:0px; margin:0px;">
		   <div style="display:inline-block; vertical-align:top;">
				<input type="submit" value="" style="width:29px; height:28px; border:1px solid red; ">
		   </div>
		   <div style="display:inline-block; vertical-align:top;">
				<input type="search" value="" style="width:269px; height:28px; border:1px solid green;">
		   </div>
	 </form>
</div>

Cholera jasna, ale leszcz ze mnie zapomniałem zupełnie o tych spacjach! Jakoś nie mogę się do tego przyzwyczaić, wydaje mi się to jakieś mało intuicyjne. No, ale teraz na pewno zapamiętam. :)

<div style="display:inline-block; width: 300px; height:30px; border:1px solid black;">
	   <form style="margin:0; padding:0; width:298px;">
	        <input type="submit" value="" style="width:29px; height:28px; border:1px solid red; margin:0; padding:0;">
			<input type="search" value="" style="width:269px; height:28px; border:1px solid green; margin:0; padding:0;">
		 </form>
	   </div>

Hmm... Mnie zastanawia czemu ustalasz stałą wysokość kontenerowi. Ja bym rozwiązał to tak:

<style>
* {box-sizing: border-box; margin 0; padding: 0;}
.clear {clear: both;}

.kontener {width: 300px; padding: 1; border-color: black;}
.input1 {width: 29px; border-color: red;}
.input2 {width: 269px; border-color: green;}

.input1, .input2 {height: 28px; float: left;}
.kontener, .input1, .input2 {border: 1px solid;}
</style>

<div class="kontener">
     <input type="sumbit" value="" class="input1">
     <input type="sumbit" value="" class="input2">
     <br class="clear">
</div>

Rozważania miały charakter czysto teoretyczny. Chcę po prostu dokładnie wiedzieć co i jak działa. Nie potrzebowałem tego aby wypełnić jakieś konkretne zadanie/projekt. Dziękuję za zainteresowanie tematem.