Question

我的网页上有一张图片，但我不明白为什么填充只设置在左侧。右侧没有任何空白。

这是我的CSS：

#main {
  margin-top: 0px;
  margin-bottom: 10px;
}

#main {
  margin-top: 100px;
  margin-bottom: 100px;
}

@media (min-width: 768px) .noo-container {
  max-width: 750px;
  width: 100%;
}

.noo-container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

article,
aside,
details,
figcapti figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

* {
  font-family: "helvetica", "arial", "sans-serif";
}

我希望左右具有相同的边距。

页面为https://prueba.soygorrion.com.ar/home/。

Answer 1

这是由于在div上使用“ background-image”属性引起的。使用该标记明显更容易，也更常见。

<div class="tp-bgimg defaultimg">
    <img src="https://prueba.soygorrion.com.ar/wp-content/uploads/2019/05/HEAD1-1024x532.jpg">
</div>

.bgimg {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
    z-index: 20;
}
.bgimg img {
    margin: 0 10px;
    width: calc(100% - 21px);
}

Answer 2

如果您检查元素，则带有<div>的{{1}}具有class="vc_row wpb_row vc_row-fluid vc_row-no-padding"。那就是这里的问题。将其命名为left: -88.5px;width: 1349px。接下来，正如您提到的left: 0;width: 100%

一样，从class="site-main noo-container"中删除此<main>

max-width

Answer 3

CSS包含许多冲突的数据：

这两个都使用id="main"来调用，那么应该是哪个呢？

#main {
  margin-top: 0px;
  margin-bottom: 10px;
}

#main {
  margin-top: 100px;
  margin-bottom: 100px;
}

然后在此处，指示与您的width: 100%;和margin-right:auto;设置冲突的margin-left:auto;。而且...虽然您已指定padding-left:15px / padding-right:15px的设置，但最好使用padding: auto;，它实际上可以使所有四个方向的内容居中。

@media (min-width: 768px) .noo-container {
  max-width: 750px;
  width: 100%;
}

.noo-container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

Answer 4

您无法第二次设置课程和ID。实际上，您可以这样做，但胡说八道。

如何设置相同的填充大小

4 个答案: