CSS：使用内边距时，解决宽随之改变问题

雯0609~2025-03-16 15:27

一、效果图

1、未调整padding的效果

2、加入padding

发现加入padding之后宽被撑开了

3、解决问题后

加入**box-sizing:border-box;**属性值解决了该问题

二、代码

1、wxml

html 复制代码

<view class="list_all flex flex-center">
  <view class="list_item">
    1
  </view>
</view>

2、wxss

css 复制代码

.list_all{
  margin-top:10px;
  width:100%;
}
.list_item{
  width:90%;
  padding:2%;
  box-sizing:border-box;
  background-color:white;
  box-shadow: 2px 2px 2px rgb(0,0,0,0.1);
}
.flex{
  display: flex;
}
.flex-center{
  justify-content:center;
  align-items: center;
}