Image is not in one line with other components <p>I know that alignment is sometimes complicated in html. But here is something puzzled for me. I have div with text,button and image with no other options.</p> <pre><code>&lt;div class="div-filter"&gt; &lt;input type="text" value="Hladaj"/&gt; &lt;input type="submit" value="Hladaj"/&gt; &lt;img alt="image" id = "ShowOrHideImage" /&gt; </code></pre> <p> </p> <p><img src="https://i.stack.imgur.com/z8VoC.png" alt="enter image description here"></p> <p>Why is image is cca 5px higher? Without image there is no padding over text and button. When I put there image..... </p> <p>To be clear:</p> <pre><code>&lt;style&gt; .div-filter { background-color:rgb(235, 235, 98); width:100%; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-color: black; border-top-color: black; border-left-color: black; border-right-color: black; border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; } </code></pre> <p></p> <p>I can resolve it with table and tableRow but it is not good for me.</p>