Question

你好我正在使用html和css使用2列和1行响应网格的页面上工作

网格工作正常，但后来我注意到这个网格的左边和右边有一个边距。

我正试图消除这个边缘，但是我没有为我工作

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

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 0%;
}
.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 TWO  */
.span_2_of_2 {
    width: 100%;
}
.span_1_of_2 {
    width: 50%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_2_of_2, .span_1_of_2 { width: 100%; }
}

</style>


<div class="section group">
    <div class="col span_1_of_2">
    This is column 1
    </div>
    <div class="col span_1_of_2">
    This is column 2
    </div>
</div>

将madding和padding都设置为零，请问如何确保网格左侧和右侧的边距都关闭。这是一个页面链接和截图

http://andymurphy.tv/index.php/landing/

Answer 1

试试这个：

body {

 margin : 0;

}

Answer 2

这是填充而非边距，因此您需要在元素或父/上设置padding: 0。

修改

.tve_lp_content tve_editor_main_content tve_empty_dropzone tve_content_width, .tve_lp_template_wrapper:not(.tve_lp_blank).tve_post_lp .tve_lp_content .out, .tve_post_lp .out .in, .tve_post_lp .tve_lp_content { padding: 0; margin: 0; }

Answer 3

您的模板正在提供该填充。要覆盖它，请使用此

<div class="pswr out" style="background-color: #EAEAEA">
    <div class="in darkSec pddbg">
        <div class="thrv_wrapper thrv_custom_html_shortcode">
            <div class="section group">
                <div class="col span_1_of_2">
                    This is column 1
                </div>
                <div class="col span_1_of_2">
                    This is column 2
                </div>
            </div>
        </div>
    </div>
</div>

Answer 4

尝试使用此，！重要覆盖任何已设置的填充

body {

 padding : 0 !important;

}

Answer 5

也许你应该开始尝试使用bootstrap？ http://getbootstrap.com/

使用bootstrap可以很容易地进行列布局，使用container-fluid可以获得页面的全宽。

<div class="container-fluid">
    <div class="col-lg-12">
        <div class="col-lg-6">
            Column one
        </div>
        <div class="col-lg-6">
            Column two
        </div>
    </div>
</div>

问题的第二种可能解决方案是将以下内容添加到您的css中：

body { margin: 0; }

Answer 6

正如DeathStorm建议您可以尝试使用负边距，即使我同意它不是最好的解决方案。

在您当前的代码库中提供

  .section.group {
    margin-left: -42px;
    margin-right: -42px;
    display: flex; /* Only needed for equal width columns */
  }

  .section.group > .col {
    flex-grow: 1; /* Only needed for equal width columns */
  }

如何完全删除边距并使div全宽

6 个答案: