移动端padding问题

ascend13
  • 136

在学习vue.js的时候,遇到这样奇怪的现象
当我设置width:375px padding: 0 22px 0 12px
如下显示

clipboard.png
可以看到左边留有空白,右边没有

控制台显示

clipboard.png

完整css

  .bulletin-wrapper
        width: 375px
        height: 28px
        line-height: 28px
        padding: 0 22px 0 12px
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis

为什么当设置width为375px(iPhone6)左边的padding可以显示,右边却没有,不是已经设置满宽度了?,事实上padding改为margin也是如此

回复
阅读 4.6k
4 个回答
✓ 已被采纳

clipboard.png

clipboard.png

第一个截图是iPhone6的截图,第二个截图是把宽度增加以后的截图,由图二可知,两边的padding设置都是正确的,只不过是p元素的父元素的宽度小于12px+375px+22px,所以后面的padding和省略号的部分看不见而已。

p元素是块元素,默认会填充父元素,所以如果不是有特殊需求,你这的width: 375px;是不是可以删除。去掉width属性后的截图如下。

clipboard.png

iPhone6的宽度就是375,你看你的box的图,内容宽度375,再加上padding,肯定超过了屏幕宽度,当然只能看到左边的padding
设置box-sizing:border-box后,width设的宽度就会是内容宽度+padding的宽度了

你这情况肯定还有横向的滚动条,你试下左右拖动下就知道了,如果屏幕是375,你设置了宽是375,padding: 0 22px 0 12px,实际上宽度是409。你加上box-sizing:border-box;这个css属性吧,加上之后,宽度就包括padding和border了,就正常了,比如宽度设置是375,padding: 0 22px 0 12px,实际上,宽度是341(375-22-12);
PS:我有一个不理解,上面那个样式是编译计算出来的,还是你写的?如果是你写的,难道手机网站,你只适配375这个屏幕尺寸?

现在设置的设备的分辨率是?

宣传栏