负边际 - 不起作用

时间:2017-05-24 16:52:16

标签: html css margin

我想知道为什么我的代码添加了几乎10px的鬼差?无论我做什么.wrapper,其中的所有内容似乎都忽略了正确的-10px边距???

***我第一次忘了提到整个东西都是边框

以下是代码:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container{
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 0 10px;
}

.wrapper{
  width:100%;
  max-width: none;
  margin-left: -10px;
  margin-right: -10px;
}

.col-m1, .col-m2, .col-m3,
.col-m4, .col-m5, .col-m6,
.col-m7, .col-m8, .col-m9,
.col-m10, .col-m11, .col-m12,
.col-l1, .col-l2, .col-l3,
.col-l4, .col-l5, .col-l6,
.col-l7, .col-l8, .col-l9,
.col-l10, .col-l11, .col-l12,
.col-xl1, .col-xl2, .col-xl3,
.col-xl4, .col-xl5, .col-xl6,
.col-xl7, .col-xl8, .col-xl9,
.col-xl10, .col-xl11, .col-xl12 {
  width: 100%;
  position: relative;
  float: left;
  padding:0 10px;
}

@media (min-width: 768px) {
  .container {
    width: 720px;
  }

  .col-m1, .col-l1, .col-xl1 { width: 8.333%; }
  .col-m2, .col-l2, .col-xl2 { width: 16.666%; }
  .col-m3, .col-l3, .col-xl3 { width: 24.999%; }
  .col-m4, .col-l4, .col-xl4 { width: 33.333%; }
  .col-m5, .col-l5, .col-xl5 { width: 41.666%; }
  .col-m6, .col-l6, .col-xl6 { width: 49.999%; }
  .col-m7, .col-l7, .col-xl7 { width: 58.333%; }
  .col-m8, .col-l8, .col-xl8 { width: 66.666%; }
  .col-m9, .col-l9, .col-xl9 { width: 74.999%; }
  .col-m10, .col-l10, .col-xl10 { width: 83.333%; }
  .col-m11, .col-l11, .col-xl11 { width: 91.666%; }
  .col-m12, .col-l12, .col-xl12 { width: 100%; }


  .offset-col-m1 { margin-left: 8.333%; }
  .offset-col-m2 { margin-left: 16.666%; }
  .offset-col-m3 { margin-left: 24.999%; }
  .offset-col-m4 { margin-left: 33.333%; }
  .offset-col-m5 { margin-left: 41.666%; }
  .offset-col-m6 { margin-left: 49.999%; }
  .offset-col-m7 { margin-left: 58.333%; }
  .offset-col-m8 { margin-left: 66.666%; }
  .offset-col-m9 { margin-left: 74.999%; }
  .offset-col-m10 { margin-left: 83.333%; }
  .offset-col-m11 { margin-left: 91.666%; }
}

HTML

网站的一些HTML标记。这特别是主页上的图像网格。但整个网站都有这个问题。

Some HTML markup for the site. This is specifically the image grid on the homepage. But the whole site has this problem.

这是右侧非延伸/额外边距的图像。非常烦人,我只是不明白。

This is an image of the non-extension/extra margin on the right side. Very annoying and I just don't understand.

1 个答案:

答案 0 :(得分:0)

删除宽度:包装类的100%。