css - spacing between inputs and text top and bottom centering

Question

Using environment: debian8 firefox-45.8
Please see:

    <p>
        <input class="left" type="text" />
        <input class="search_btn" type="submit" value="搜索" />
    </p>
    
    css
    
* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }
.left {  width:420px;height:30px; }
.search_btn { width:70px; height:30px; line-height:30px; }

显示效果

There are two questions here:
1. The text in submit cannot be centered up and down
Vertical-align:middle is set; the text "Search" cannot be centered up and down
The two words "Search" are placed at the bottom

2. There is an explanation for the spacing problem between two inputs. Spaces also occupy space.
Let’s modify an html structure and find that the spacing has indeed become a little smaller, but why it still hasn’t disappeared.

    <p>
        <input class="left" type="text" /><input class="search_btn" type="submit" value="搜索" />
    </p>

css remains unchanged, the display effect is as follows:

Why is there still a gap? Already set padding:0px;margin:0px;?

Add border to input.left and modify the css to:

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }
.left {  width:420px;height:30px;border:1px solid red; }
.search_btn { width:70px; height:30px; line-height:30px;}

间隙还在。

Add border to input.search_btn

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }
.left {  width:420px;height:30px;border:1px solid red; }
.search_btn { width:70px; height:30px; line-height:30px;border:1px solid red; }   

The gap disappears

Please: 1. How to center text top and bottom

2。如何详细解释问题2？？

Answer 1

1. The reason why the text is not centered: because box-sizing is set to border-box, so height = border + padding + height of the content area, because the height is set to 30px, the default width of the border is middle, different browsers are specific The pixel values ​​used are inconsistent. Look at the picture below. Firefox’s middle uses 3px, so only 24px is left in the content area. Because you set the line height to 30px, if you don’t set the height, the automatically calculated height should be 30px + 3px + 3px = 36px, when you set the height less than 36px, the excess part below is hidden, so it feels like it is not centered; you can change the height value in the browser to see the effect; put .search -btn’s line-height attribute removes the text and centers it.

   

2. For inline elements, the whitespace character will be converted into a space, because there is a newline after the first p, and the newline character is a whitespace character, so it is converted into a space. After changing the html format, there is still a spacing, which may be the button style implemented by Firefox itself. Although there is a 3px border, the effect is obvious that the border is not that thick. It is estimated that when Firefox implements it, there will be a 2px transparent border around it, and then 1px solid line frame. When setting the border explicitly, depending on your implementation, you should be able to override the default border implementation, so there will be no gaps.