Misalignment will occur if the input, of div package is not positioned. Find out the reason.

  online preview  

Css
Nov.29,2021

the first question is whether the default font height is 1 pixel or 2 pixel, so it is misaligned. You can add a font-size:0 to div and align it without positioning.

the second one is that the background color of your box is pressed on by the back elements, leaving a background color.


because input is an inline element, there is a default vertical-align , which is caused by vertical-align .
after you use the location, you will not be affected by the surrounding elements, eliminating the influence of vertical-align
there are many ways to eliminate the influence of vertical-align . For more information, please see the following reference article

. < hr >

reference article
CSS deeply understands the gay relationship between vertical-align and line-height
10.8Line height calculations: the 'line-height' and' vertical-align' properties


summarize your answers
@ XYShaoKang

@ try to learn to smile

  1. line-height:0 or font-size:0; of div
  2. vertical-align:top or bottom or super or text-top or text-bottom; of input
  3. or use my method to locate
Menu