网格系统上的完整容器

Question

晚上好！

我目前正在尝试显示一个完整的 100% 容器，该容器包裹在网格系统周围，但是，完整的容器仍显示为周围有边距。

完整的 css 和 html 如下：

<body>
<div class="container filledBlack">
    <div class="section group">
        <div class="col span_4_of_12 filled matchheight">
            <p>TestLorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="col span_4_of_12 filled matchheight">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="col span_4_of_12 filled matchheight">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
    </div>
</div>
<!-- Scripts -->
<script src="js/jquery.js"></script>
<script src="js/matchHeight.js"></script>
    <script type="text/javascript">
    jQuery(function($){
        $('.matchheight').matchHeight();
    });
    </script>

/* CONTAINER */
.container{
margin: 0;
padding: 0;
border: 0;
}

/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
width: 100%;
}

.span_11_of_12 {
width: 91.53%;
}
.span_10_of_12 {
width: 83.06%;
}

.span_9_of_12 {
width: 74.6%;
}

.span_8_of_12 {
width: 66.13%;
}

.span_7_of_12 {
width: 57.66%;
}

.span_6_of_12 {
width: 49.2%;
}

.span_5_of_12 {
width: 40.73%;
}

.span_4_of_12 {
width: 32.26%;
}

.span_3_of_12 {
width: 23.8%;
}

.span_2_of_12 {
width: 15.33%;
}

.span_1_of_12 {
width: 6.866%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {  margin: 1% 0 1% 0%; }

.span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
width: 100%; 
}
}

任何人都可以给我任何想法，让我可以在不弄乱网格中的 margins/padding 等的情况下创建容器吗？我尝试了 reset.css，但这只会让网格变得混乱。

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

Answer 1

兄弟，请添加到 CSS body { margin: 0px; }

/* REMOVE BODY MARGIN */
body {
margin: 0;
}

/* CONTAINER */
.container{
margin: 0;
padding: 0;
border: 0;
}

/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
width: 100%;
}

.span_11_of_12 {
width: 91.53%;
}
.span_10_of_12 {
width: 83.06%;
}

.span_9_of_12 {
width: 74.6%;
}

.span_8_of_12 {
width: 66.13%;
}

.span_7_of_12 {
width: 57.66%;
}

.span_6_of_12 {
width: 49.2%;
}

.span_5_of_12 {
width: 40.73%;
}

.span_4_of_12 {
width: 32.26%;
}

.span_3_of_12 {
width: 23.8%;
}

.span_2_of_12 {
width: 15.33%;
}

.span_1_of_12 {
width: 6.866%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {  margin: 1% 0 1% 0%; }

.span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
width: 100%; 
}
}

<div class="container filledBlack">
    <div class="section group">
        <div class="col span_4_of_12 filled matchheight">
            <p>TestLorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="col span_4_of_12 filled matchheight">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="col span_4_of_12 filled matchheight">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
    </div>
</div>

Answer 2

只需添加

body {
    margin: 0;
}

如果你想要容器上的保证金

.container {
    margin: 0 2%; //or whatever percentage you want
}

如果您想要一个特定宽度的居中容器，只需添加一个最大宽度并更改边距，然后添加一些填充以使容器和内容之间 space

.container {
    max-width: 960px;
    margin: 0 auto; //centering the fixed-width container
    padding: 0 2% //Making space between container edge and content
}

我还建议您删除列中基于百分比的顶部和底部边距，并且仅将其添加到它们开始堆叠的断点处。考虑使用固定值，因为垂直 margin/padding 百分比是由父宽度而不是高度计算的（是的，这对我来说也没有多大意义）。

.col {
    display: block;
    float: left;
    margin: 0 0 0 1.6%; //here I removed top and bottom margin
}

@media only screen and (max-width: 480px) {
    .col {
        margin-bottom: 10px;
    }
}

我看到你的在线版本上有大量重复的 .col 和 .container CSS，你真的应该删除它们。一旦样式表变得更加复杂，它们将很麻烦

欢迎详细说明我误解了什么的问题

网格系统上的完整容器

Full container on Grid System

html

css

margin