我的宽度比我的屏幕大，但正文和html设置为0填充和边距以及100%宽度

删除引导后，我遇到了这个问题，我的页面宽度比屏幕大，因此有一个水平滚动条。我认为将正文、html设置为0填充和边距以及100%宽度都可以，但问题仍然存在

解决方案编辑：我有比视图更宽的图像，因此我需要设置

框大小：边框框

，以在父视图中包含图像。然后我为所有元素继承了这个。因此，现在我的CSS的顶部是：

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

html:

---

你的图像是什么让你的屏幕宽度溢出？始终可以使用框大小调整来帮助清除边距和填充：

使用

框大小调整：边框框

因此您的填充包含在宽度中。否则，实际宽度为100%+25%+25%=150%

CSS3盒大小属性

内容框默认值。宽度和高度属性（以及最小/最大属性）仅包括内容。不包括边框、填充或边距

边框框宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，但不包括边距

body，html{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
梅因先生{
宽度：100%；
身高：100%；
}
.内容{
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
填充：0；
高度：300vh；
}
.第页{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
身高：100%；
位置：相对位置；
宽度：100%；
文本对齐：居中；
垂直对齐：中间对齐；
字号：18px；
左：25%；
右：25%；
框大小：边框框；
}

阿萨德

测试3

asdasd

测试2

试验

只要在CSS中替换此部分，水平滚动就会消失：

.content {
       display:inline-block;
      /*display: flex;
      flex-direction: column;
      align-items: stretch;*/
      padding: 0;
      height: 300vh;
 }

---

但我真的不明白你想用这些CSS代码实现什么。

是的！这很有效，谢谢，学到了一些新东西：）我会在2分钟内标记为答案这是解决方案，但填充不是我的问题。图像是。谢谢你@事实上，

box size:border box

解决了填充和img这两个问题，good luck=d对于全局默认值：

body{box size:border box；}

和

body*{box size:border box；}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    height: 300vh;
}

.page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    padding-left: 25%;
    padding-right: 25%;
}

.content {
       display:inline-block;
      /*display: flex;
      flex-direction: column;
      align-items: stretch;*/
      padding: 0;
      height: 300vh;
 }