遇到怪异盒模型怎么办

遇到怪异盒模型怎么办
我们做网页经常会遇到标准盒模型,如下图这样
我们可以看到外边距，内填充和框边的区别，padding内填充在盒子内部，增加内填充大小，盒子大小也会发生改变,边框靠近内填充增加边框也会增加增加盒子的大小,但是我们遇到怪异盒模型就不是这样了,比如
这个例子中我们建了一个表单，然后表单中添加了两个元素
一个text文本， 一个submit提交按钮然后给他们定义了同样高度和不同背景色便于区分，text文本为黄色区域高度100px，submit按钮则为红色，高度为100px，初始样子如图所示，运行状态也在上面，然后我们来增加这个文本框和按钮同时加上下padding值，比如给他个padding:50px 0;我们只给高度发生变化

然后效果图在上面，我们发现同样是加上下两个50px的padding值，text文本确实是按照标准盒模型来的高度多了100像素，但是这个submit按钮却没有，然后我们打开页面的控制台，按F12
鼠标滑过这两个区域会看到这样的：

然后我们从控制台发现了原因：text文本框和submit按钮有默认样式
即都有个2像素的边框，我们给text文本框加的上下padding值确实加在高度上面了Text 100+50（上）+50（下）+2（上边框）+2（下边框）=204
那Submit 100+50+50+2+2怎么等于104？？？
这里其实Submit就是一个怪异盒模型，原来的Submit定义的是100px高就是内容区100px，然后一个默认的边框上下都是2个像素变成104px，接着加了padding之后为了保持原来的模型高度，padding值就“挤占”了内容区，故我们发现内容区高度为0了，只剩上下padding，submit高度为0（内容）+100（padding）+4（边框）=104px

如果我们非要让text和submint一样高度的话，可以直接定义这个怪异盒模型的高度等于标准盒模型增加padding值后的高度这样可以“绕过”两个盒模型不一样的难题。