Question

我尝试在页面的顶部，底部，左侧和右侧创建一个包含20px装订线的页面。我的集装箱的当前设置似乎不适用于我想要在我的集装箱乘坐侧的20px排水沟

这是我的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/

Answer 1

您应该从margin移除.neo_container并将padding应用于.neo_wrapper

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

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

使用默认的大小调整，只要元素应用了填充或边框，实际渲染的宽度就会比您设置的宽度宽...

您可能会这样想：使用box-sizing：border-box填充和边框在框内按压，而不是展开框。结果是一个框，你设置它的确切宽度，可以指望。

请看下面的代码：

/* 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>

Answer 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;*/
}

Answer 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%;   

}

Answer 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;
}

容器与排水沟

4 个答案: