undefinedfix
Sign in

Inconsistent input note height

Sabre edited in Sun, 22 May 2022

Problem scenario: in making a tool similar to the search bar, two input boxes are used. Problem: the heights of the two boxes (one type ='text ', the other type ='button') are different. Without setting any relevant height, the code is:

#create {
  margin-bottom: 1rem;
}
#create input {
  font-size: 1.4rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

The picture is:

clipboard.png

clipboard.png

It can be seen that the input of type = text is actually shorter than that of type = button. In order to keep the height consistent, I set the values of height and line height

#create {
  margin-bottom: 1rem;
}
#create input {
  font-size: 1.4rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
  height: 2.5rem;
  line-height: 2.5rem;
}

But the results are as follows

clipboard.png

I don't know why this happened

4 Replies
dinara_pulseway
commented on Sun, 22 May 2022

If the default style is not reset, you can see the corresponding default style in dev tool, and you can view and modify it. It is recommended that the project be introduced uniformly reset.css perhaps normalize.css Reset all basic styles to avoid similar problems

bckygldstn
commented on Sun, 22 May 2022

在你没重置样式前,<input type="button"/>的默认css box-sizing: border-box,影响到了

字体1.4rem 上下0.6rem的padding 2.5rem的高度 当然不够

可以使用box-sizing:content-box
tatsujin
commented on Mon, 23 May 2022

To avoid these problems, two solutions are provided: 1. Set a separate class for each input, and then write the required style separately; 2. For buttons, it's better to write a div label by yourself, which can avoid many problems and improve the R & D progress.

Trung
commented on Mon, 23 May 2022

If type = button, the situation is different. You need to write a separate style

lock This question has been locked and the reply function has been disabled.