移动端padding问题

发布于 2022-09-05 02:05:18 字数 734 浏览 11 评论 0

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

可以看到左边留有空白，右边没有

控制台显示

完整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也是如此

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

○闲身 2022-09-12 02:05:18

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

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

回复收藏 0

许仙没带伞 2022-09-12 02:05:18

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

回复收藏 0

晚风撩人 2022-09-12 02:05:18

你这情况肯定还有横向的滚动条，你试下左右拖动下就知道了，如果屏幕是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这个屏幕尺寸？

回复收藏 0