带排水沟的容器答案

【问题标题】：Container With Gutters带排水沟的容器
【发布时间】：2014-10-02 20:32:25
【问题描述】：

我正在尝试在页面的顶部、底部、左侧和右侧创建一个带有 20 像素间距的页面。我的容器的当前设置似乎不适用于我想在容器的骑行侧设置的 20 像素排水沟

这是我的 HTML：

<body>
<div class="neo_wrapper">   <!-- Wrapper start -->
    <div class="neo_container"> <!-- Container start -->
        <div class="neo_header-fixed"></div>
        <div class="neo_column_a"></div>
        <div class="neo_column_b"></div>
        <div class="neo_column_c"></div>
        <div class="neo_footer-fixed"></div>
    </div>  <!-- Container end -->
</div>  <!-- Wrapper end -->
</body>

还有我的 CSS

*{
  margin: 0;
  padding: 0;
  border: none;
}


/* Wrapper for entire page */
.neo_wrapper{
   width: 100%;
   height: 900px;
   margin: 0 auto;
}


/* Container for content */
.neo_container{
    width: 100%;
    height: 100%;
    margin: 120px -20px 50px 20px;
 }

/* Fixed header */
.neo_header-fixed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: #999;
    z-index: 1000;
}

.neo_column_a{
    width: 33.3333333333%;
    height: 100%;
    background: #063;
    float: left;
}

.neo_column_b{
    width: 33.3333333333%;
    height: 100%;
    background: #00F;
    float: left;
}

.neo_column_c{
    width: 33.3333333333%;
    height: 100%;
    background: #F00;
    float: left;
}

/* Fixed footer */
.neo_footer-fixed{
    position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 30px;
   background: #999;
   z-index: 1000;
}

还有 jsFiddle：http://jsfiddle.net/x0cfdm5r/

【问题讨论】：

我猜 gutter 是 padding 或 margin :)
考虑以不同的方式排列您的标记。将您的固定页眉和页脚放在包装器之外。这样你就可以在包装器内只包含三个内容列，将边距（不是装订线）应用于包装器，然后瞧。

标签： html css containers margin

【解决方案1】：

您应该从.neo_container 中删除margin 并将padding 应用到.neo_wrapper

您还应该使用 CSS 属性 box-sizing，查看更多关于 here 的信息和here

看看here为什么你应该（非强制性）使用box-sizing

使用默认的 box-sizing，一旦元素应用了填充或边框，实际呈现的宽度就会比您设置的宽度更宽...

你可能会这样想：使用 box-sizing:border-box 填充和边框压入框内而不是展开框。结果是一个与您设置的确切宽度相同的框，并且可以依赖。

看看下面的sn-p：

/* CSS Document */

/* This is our reset */

* {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}
/* Wrapper for entire page */

.neo_wrapper {
  width: 100%;
  height: 900px;
  margin: 0 auto;
  padding: 120px 20px 50px 20px;
}
/* Container for content */

.neo_container {
  width: 100%;
  height: 100%;
  /*background: #000;*/
}
/* Fixed header */

.neo_header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #999;
  z-index: 1000;
}
.neo_column_a {
  width: 33.3333333333%;
  height: 100%;
  background: #063;
  float: left;
}
.neo_column_b {
  width: 33.3333333333%;
  height: 100%;
  background: #00F;
  float: left;
}
.neo_column_c {
  width: 33.3333333333%;
  height: 100%;
  background: #F00;
  float: left;
}
/* Fixed footer */

.neo_footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: #999;
  z-index: 1000;
}

<body>
  <div class="neo_wrapper">
    <!-- Wrapper start -->
    <div class="neo_container">
      <!-- Container start -->
      <div class="neo_header-fixed"></div>
      <div class="neo_column_a"></div>
      <div class="neo_column_b"></div>
      <div class="neo_column_c"></div>
      <div class="neo_footer-fixed"></div>
    </div>
    <!-- Container end -->
  </div>
  <!-- End of wrapper -->
</body>

【讨论】：

【解决方案2】：

使用填充而不是边距作为边距，然后您可以使用box-sizing (https://developer.mozilla.org/de/docs/Web/CSS/box-sizing)。

JSFiddle：http://jsfiddle.net/x0cfdm5r/5/

/* Container for content */
.neo_container{
    width: 100%;
    height: 100%;
    padding: 120px 20px 50px 20px;
    box-sizing: border-box;
    /*background: #000;*/
}

【讨论】：

没有负填充之类的东西！
哦，对不起，我的错，忘记了。我在我的回答中修复了它，谢谢:)
请记住，您忘记了 box-sizing 属性上的浏览器供应商，这不会使其跨浏览器:)
是的，这是真的，您在回答中解释得更好

【解决方案3】：

你是http://jsfiddle.net/x0cfdm5r/2/

/* Wrapper for entire page */
.neo_wrapper{   
    height: 900px;
    margin: 0 auto;
    padding: 120px 20px 50px 20px;
}


/* Container for content */
.neo_container{
    width: 100%;
    height: 100%;   

}

【讨论】：

【解决方案4】：

我建议在包装器上使用position: relative - 它可以更轻松地以您想要的方式使用填充。

改变这些：

/* Wrapper for entire page */
.neo_wrapper{
    left: 0;
    right: 0;
    position: relative;
    padding: 20px;
    height: 900px;
    margin: 0 auto;
}


/* Container for content */
 .neo_container{
    width: 100%;
    height: 100%;
    margin: 100px 0 30px 0;
}

【讨论】：