input 与 button 的问题（空隙/不等高/对不齐）及解决办法

Posted 2020-12-21 jodedong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input 与 button 的问题（空隙/不等高/对不齐）及解决办法相关的知识，希望对你有一定的参考价值。

1. input 与 button 为什么有空隙?

- 要明白为什么,需要了解一下几点基础知识(耐心看完,你会发现竟如此简单)

1. input 与 button 都属于行级块元素,都具有文本特性,

2. html中有一个被称之为:空白文本分隔符的东东(即:html中,无论你在两个行级或行块级元素之间写多少个回车和空格都会被折叠一个空格,我在这里称它为空白文本分割符)

3. 关键也就来了:我们在写的html代码中,你会发现我们的input 与 buton元素之间是不是有个回车,而这个回车就是我上面所说的空白文本分割符,他是有大小的,所以会出现 input 与 buttom之间有空隙的现象

- 解决办法:

- 知道了为什么,那么解决办法就相当的容易了,直接删除我们html代码中input 与 button 之间的回车即可.

2. input 与 buttom 为什么设置的等高却不等高? 等高却对不齐?

- 我希望你可认真按照下面的方法跟着探索(你会发现,竟~哈哈哈)

1. 创建一个test.html

2. 敲上input 和 button两个元素,定义宽高,因为我们要测试为什么高度一致却对不齐,所以,我们给它们等高,等边框,宽度随意,

[注意:input与button之间有缝隙问题,要对齐,先去掉缝隙,如何解决:具体参考上个问题]

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9          * {
10             padding: 0;
11             margin: 0;
12         }
13         input {
14             width: 180px;
15             height: 40px;
16             border: 1px solid #008c8c;
17         }
18         
19         button {
20             width: 50px;
21             height: 40px;
22             background: inherit;
23             border: 1px solid black;
24             /* box-sizing: content-box; */
25         }
26     </style>
27 </head>
28 
29 <body>
30     <input type="text"><button>按钮</button>
31 </body>
32 
33 </html>

以上代码在浏览器中查看,你会发现明明设置的是等高,但input却比button高度要高一些(为什么呢,继续往下看)

3. 右键检查(或F12使用开发者工具),选中input元素,查看他的盒子模型,你会发现,咦,这玩意除了我们设置的宽高,居然还有自带的padding,这时候你会想,是不是padding的问题,(其实button也是有自带的padding的),

为了排除padding的影响,我们在代码中插入*{

padding:0;

margin:0;

}

这时候你会发现,咦,好像还是对不齐,看来不是padding的问题(其实,我们在开发中,一般都会初始化所有元素的padding和margin),所以这一点很明显不是影响input 和 button对不齐的原因

4. 此时,我们在选中button元素,查看他的盒模型,咦,一会惊奇的发现,卧槽,怎么它的宽度是48px,高度是38px了呢,我们明明设置的是 50px 和 40px啊,但是你在细心观察你会发现,咦,边框加上好像就是我们设置的50px和40px了,哇,这不就是box-sizing:border-box的表现吗?(我们此时在Computed中查看计算样式 box-sizing 发现还真是 border-box)

到了这里,我们的问题终于有点眉目了,不要放弃,坚持就是胜利,距离大神只差一步,我们每次探索问题的每一步

5. 这点需要知道:

Chrome浏览器box-sizing默认是content-box,即padding 和 border都是不算在我们设置的width 和 height中的,

而 box-sizing : border-box,即 padding 和 border 是算在width 和 height中的;

6. 到了这里相必大家也都知道为什么 input 和 button 对不齐的,这也就是为什么我们查看button的盒模型时,它的width变为38px的原因了,

7. **此时,我们把button的width改为 42px(记得改高度,我就不在写代码了)

8. 最后你会发现还是有一丢丢的对不齐,按理来讲它应该对齐了呀,

哈哈哈,此时才发现,我们只是解决了第一个小问题,为什么不等高,

其实,我们起初就以为他们是对不起,而忽略了等不等高的问题,不着急继续

9. 给input设置 vertical-align:1px;你会发现,卧槽,完美对齐了,

,以上的都是自己摸索的过程,但也只完美的解决了第一个隐藏问题,为什么不等高,但为什么对不齐,其实我也不太清楚,只是凑巧用学过的属性,用到了这里,虽然解决了,但还是不清楚所以然,忘有大家有清楚的可以指导一下,谢谢大家(记得留言探讨哦~)

以上是关于input 与 button 的问题（空隙/不等高/对不齐）及解决办法的主要内容，如果未能解决你的问题，请参考以下文章