border对于其余元素的影响

上图中加减按钮所在的容器有向右下方倾斜的趋势，我将减按钮的border取消，容器的倾斜就消失了，见下图。

如果我将border加粗，则倾斜的角度增大，如下图所示。

然而减按钮设置了boxsizing属性为border-box，宽高始终为20px，border为何会对与之同级的元素有这样的影响？

当我将父元素设置display：flex时，又能够修复这种影响，这是为什么？

江舟 2021-09-18

源自：项目联调与打包发布 1-1 如何进行真机调试

收起

1回答

好帮手慕慕子 2021-09-18 17:49:11

同学你好，猜测是与行内或行内块元素默认以基线对齐有关，由于元素设置了box-sizing:border-box;属性，宽高不变的情况下，那么改变边框大小时，会影响元素内容的高度，从而影响了元素基线，导致同级元素之间的对齐方式发生变化。

对于同学说的设置了display:flex;后效果就正常了，只有截图无法定位问题，可以将写的完整代码全部粘贴过来，老师测试下，便于帮助同学准确的定位与解决问题。

祝学习愉快~

收起回答

提问者江舟 #1

<template> <div class="product-buy"> <template v-if="getProductNum(getProductId(item))!==0"> <span class="product-minus" @click="()=>decProduct(item)" >- <span class="product-num">{{getProductNum(getProductId(item))}} </template> <span class="product-add" @click="()=>addProduct(item)">+ </div> </template> <style lang="scss" scoped> @import '../../style/varieties.scss'; .product{ &-buy{ font-size: .35rem; line-height: .5rem; // display: flex; } &-minus,&-add{ display: inline-block; box-sizing: border-box; width: .5rem; height: .5rem; border-radius: 50%; font-size: .45rem; font-weight: bold; text-align: center; } &-num{ display: inline-block; margin: 0 .25rem; width: .35rem; text-align: center; } &-minus{ border: #666 .025rem solid; } &-add{ background-color: $btn-bgColor; color: #fff; } } </style> 

谢谢老师，上面是相应的scss和模板代码。

2021-09-18 18:57:12

好帮手慕慕子回复提问者江舟 #2

同学你好，对于你的问题解答如下：
1、因为按钮等后代元素会继承product-buy元素设置了line-height属性，而按钮等元素设置了box-sizing:border-box;属性，那么在宽高不变的情况下，改变按钮的边框大小时，会影响元素内容占据的高度，导致元素的基线位置跟随发生变化，而行内块（display属性为inline-block）元素默认以基线对齐，所以会影响其他元素的位置。
2、给pruduct-buy元素添加display:flex;属性后，根据align-items属性定义项目在交叉轴上如何对齐，没有设置该属性时，默认值为stretch，占满整个弹性盒子的高度，所以调整按钮的边框宽度时，并不影响按钮实际占据页面的高度，所以项目之间的对齐方式不会发生任何改变。
同学了解下即可，代码实现是很灵活的，具体情况具体分析，灵活应用所学知识去实现效果就可以啦~
祝学习愉快~

2021-09-22 14:35:10