The text box and button are not aligned

1. Code:
clipboard.png

clipboard.png

2.:
clipboard.png
3. Question: Why do text boxes and buttons misalign naturally? what is the reason? there is no need to answer the solution. I just want to know why ?

Mar.11,2021

use floats to align the style questions asked


. Css code does not post a word, this question asks


add vertical-align:middle; to the two elements to try
is aligned by default: demo how your css is written


1, button always uses Quirks mode in height calculation.
2. In Quirks mode, the border is calculated within the width of the element, not on the outside like the standard mode, so setting the border on text and button at the same time will get the phenomenon that the height of button is smaller than that of text.
3. The height of the button contains the height of the border, while the text box text does not contain the height of the border.
set the borders to none and try


I'm aligned without styling.

Menu