当我有分层背景时，如何在内容周围创建填充

Question

我已经为Hatch主题创建了一个子主题。我想在背景中有一个固定的图像，一个横跨90%宽度并随主体滚动的白色背景。

问题：我无法在正文周围填充（它一直延伸到边缘）

以下是该网站的链接：http://www.westonsnorwood.com

这是我在style.css表单中尝试的文本：

    /*
Theme Name: hatch-child
Theme URL: http://www.westonsnorwood.com
Description: Hatch Child Theme
Author: Weston Norwood
Template: hatch
*/
@import url('../hatch/style.css');
body{
 margin: 0 10;
 padding: 10px;
 }
.wrap {
 background: #f6f6f6;
 background-position: center center; 
 max-width: 80%;
 padding: 20;
}
body{
 background-image: url(http://www.westonsnorwood.com/wp-content/uploads/2016/04/woodgrainlight.jpg);
 background-position: center center;
 background-attachment: fixed;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

如有任何帮助，我们将不胜感激！

Answer 1

所以问题在于您编写.wrap填充样式的方式。它没有被告知如何处理"20"，所以你想做的是把它变成20px。

最终代码：

    /*
Theme Name: hatch-child
Theme URL: http://www.westonsnorwood.com
Description: Hatch Child Theme
Author: Weston Norwood
Template: hatch
*/
@import url('../hatch/style.css');
body{
 margin: 0 10;
 padding: 10px;
 }
.wrap {
 background: #f6f6f6;
 background-position: center center; 
 max-width: 80%;
 padding: 20px; // turn it into 20px
}
body{
 background-image: url(http://www.westonsnorwood.com/wp-content/uploads/2016/04/woodgrainlight.jpg);
 background-position: center center;
 background-attachment: fixed;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

Answer 2

向主容器添加填充您的文本位于wrap容器内，向正文添加填充将推动wrap容器，但不会覆盖wrap容器的填充。如果您将padding: 50px;添加到body，那么您会注意到wrap容器更多地是推送的，而不是内容。如果您想推送内容，请在wrap容器中添加填充。

.wrap{
   padding: 20px;
}

注意：您已经在.wrap上填充了内容，但如另一个答案所示，其中缺少px单元。

Answer 3

问题似乎是您留下了值的单位前缀（px），即

.wrap {
  padding: 20px;
}

同样在：

body{
  margin: 0 10px;
}

Answer 4

.wrap {
    background: #f6f6f6;
    background-position: center center; 
    max-width: 80%;
    padding: 20px;  <---------- You're missing the px unit
}