html - CSS改变整个网站的边距，有没有办法覆盖它？

Question

当我为表单添加 css 文档时，它会破坏我的页边距。我已经尝试将所有边距和填充更改为 0，但没有帮助。唯一可行的方法是删除整个 css 文件。我也尝试删除 css 中的所有正文引用，但问题仍然存在。我还尝试将 !important 添加到页面的主 css 中。我不确定是什么导致了 css 文件中的这个问题。当我在浏览器中检查代码时，它并没有显示这个 css 正在被使用。

body {
    margin: 0px;

    aside {
        background: #1f8dd6; /* same color as selected state on site menu */
        padding: 0.3em 1em;
        border-radius: 3px;
        color: #fff;
        margin-bottom: 2em;
    }
    textarea {
        width: 100%;
    }
    .content-head {
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 2em 0 1em;
    }
    .is-center {
        text-align: center;
    }
    .button-success {
        color: white;
        border-radius: 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        background: rgb(28, 184, 65); /* this is a green */
    }
    .button-xlarge {
        font-size: 125%;
    }
    button {
        float: right;
    }
    #name, #email {
        width: 50%;
    }
}

标签： htmlcss

Answer 1

您的 css 文件包含每个类、元素、id 两次。因此它给出了问题。

从您的 css 文件中删除所有代码并粘贴，

  body {
  margin: 0px;
  aside {
    background: #1f8dd6;
    /* same color as selected state on site menu */
    padding: 0.3em 1em;
    border-radius: 3px;
    color: #fff;
    margin-bottom: 2em;
  }
  textarea {
    width: 100%;
  }
  .content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
  }
  .is-center {
    text-align: center;
  }
  .button-success {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(28, 184, 65);
    /* this is a green */
  }
  .button-xlarge {
    font-size: 125%;
  }
  button {
    float: right;
  }
  #name,
  #email {
    width: 50%;
  }