在非引导页面中将填充添加到100％宽度div

Question

我已经创建了一个布局，其中div的宽度为100％，我想在其中添加填充但是它打破页面请参考下面的代码

HTML

<div class="main">
  <div class="inner">
    some text
  </div>
</div>

CSS

.main{
  width:100%;
  padding:10px;
}
.inner{
  width:100%;
}

fiddle link 提前致谢

Answer 1

使用div意味着默认它已经是100%宽度所以如果你可以删除宽度然后它会正常工作但可能有一些因为你需要使用宽度然后你可以使用以下css。

<强> CSS

.main{
  width:100%;
  padding:10px;
  box-sizing:border-box;
}

这将自动减少宽度的填充，你会看到100％的div，填充宽度超出任何破坏

Answer 2

尝试从width 100%移除inner并将padding添加到div Demo

.main{
  width:100%;     
  background:#000;
}
.inner{
  padding:10px;
  color:#fff;
}

更新：在#inner中使用div时，默认情况下需要100% width ..所以无需指定内部宽度，可以查看它 here

Answer 3

使用此css

.main{
  padding: 10px;
  width: calc(100% - 20px);
  background:#000;
}

<强> JSFiddle Demo

正如GLP所提到的，你不需要在内部div上指定100％的宽度，因为它是所有块元素的默认宽度。