input与button的问题（空隙不等⾼对不齐）及解决办法
1. input 与 button 为什么有空隙?
- 要明⽩为什么，需要了解⼀下⼏点基础知识(耐⼼看完，你会发现竟如此简单)
1. input 与 button 都属于⾏级块元素，都具有⽂本特性,
2. html中有⼀个被称之为：空⽩⽂本分隔符的东东(即:html中,⽆论你在两个⾏级或⾏块级元素之间写多少个回车和空格都会被折叠⼀个空格，我在这⾥称它为空⽩⽂本分割符)
3.关键也就来了：我们在写的html代码中，你会发现我们的input 与 buton元素之间是不是有个回车,⽽这个回车就是我上⾯所说的空⽩⽂本分割符，他是有⼤⼩的，所以会出现 input 与 buttom之间有空隙的现象
- 解决办法:
- 知道了为什么，那么解决办法就相当的容易了，直接删除我们html代码中input 与 button 之间的回车即可.
- 解决办法2：
  让 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;
box sizing21            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:0.8px；你会发现，卧槽，完美对齐了, 或者 vertical-align:bottom;;
，以上的都是⾃⼰摸索的过程，但也只完美的解决了第⼀个隐藏问题，为什么不等⾼，但为什么对不齐，其实我也不太清楚，只是凑巧⽤学过的属性,⽤到了这⾥，虽然解决了，但还是不清楚所以然，忘有⼤家有清楚的可以指导⼀下，谢谢⼤家(记得留⾔探讨哦~)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。