Css 消除左侧填充的副作用

我有以下代码：

CSS

#page {
    width: 400px;
    height: 400px;
    border: 1px solid #F00;
}
#page #bar {
    width: 100%;
    padding-left: 10px;
    border: 1px solid #00F;
}

HTML

<div id="page">
    <div id="bar">1 2 3 4 5 6 7 8 9 0</div>
</div>

1 2 3 4 5 6 7 8 9 0

我应该在CSS

#page#bar

中添加什么来消除红色框之外的额外部分

---

这是。

只需删除

宽度：100%

默认情况下，块元素（如
div
）将填充其容器的宽度（考虑填充）

演示在


这不是副作用。这是基于当前盒子模型的应该如何

如果让指定宽度（在您的情况下不是这样），则可以将该规则的
框大小调整
属性更改为

#page #bar {
    width:100%;
    padding-left: 10px;
    border: 1px solid #00F;

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

演示在
您需要指定属性：

#page #bar {    
    width: 100%;
    padding-left: 10px;
    border: 1px solid #00F;

   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

这意味着
100%宽度
应用于整个元素，包括边框-因此嵌套元素将调整大小，使其边框位于父元素内

默认值为
内容框
，这意味着
100%宽度
应用于内容-内容区域的宽度与父级相同。
您可以使用此类

#page #bar {
    width: 98%;
    padding-left: 2%;
    border: 1px solid #00F;
}

您应该将宽度减小到
大约97%

在页面栏中将宽度更改为97%
虽然选择了最佳答案，但我想分享另一种方法

只需在
#页面
中添加
溢出：隐藏
，即可解决“副作用”

下面是一个演示。
不知道通过将padding left设置为#bar元素来完成什么，但是可以使用：last child CSS伪类删除左侧不需要的padding，如下所示：

#page #bar:last-child {
    padding-left: 0;
}

这里有一把小提琴实现了同样的事情：

注：至少
框大小调整
无法解决此问题
@c-link它可以工作。。但是您还需要添加供应商前缀<代码>-moz-

，

-webkit-

等…@C-Link-是的，我测试过。我也在答案中添加了特定于浏览器的属性，因为并非所有浏览器都支持它！是的，但即使在新的浏览器中，我也在使用Firefox22。声明供应商前缀后，它就起作用了…侧注：

：last child

仅在IE9之后可用。好的，解释了如何使用

：first child

伪类在IE7+上执行此操作。该小提琴未更新。已更新链接，请检查它。

#page #bar:last-child {
    padding-left: 0;
}