6.小程序 padding 对右侧和底部不起作用

场景

自己在给小程序 设置padding ，左侧、top均起作用，但对右侧和底部不起作用。不起作用时的代码如下：

Page{
  padding: 10rpx;
}

.book-item{
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #0f0;
  align-items: center;
}

此时效果如下：

padding-fail.gif

解决方案及原因

把book-item中的宽度由上面的100%改成了730rpx。
原因分析：当100%宽度时，如果此时再设置padding:10rpx;，会超过屏幕总宽度750rpx。730rpx = 750（注：小程序屏幕宽度总是750rpx） - 10rpx（注：这个是左边10） - 10rpx（注：这个是右边10）；

Page{
  padding: 10rpx;
}

.book-item{
  width: 730rpx;
  height: 100%;
  display: flex;
  background-color: #0f0;
  align-items: center;
}

按照上面修复后，效果如下：

padding-ok.gif

转载于:https://www.jianshu.com/p/fbd8e13687e6