Question

我有体型

 html, body {
    margin: 0px;
    padding-left: 15px;
    font-family: Arial, Verdana, Tahoma, Sans-Serif;
}

我有一个页脚后跟

#footerBar {
color: #999;
margin: 0;
border-top: 10px solid #000;
width: 100%;
background-color: #000;
float: right;
margin: 0px;
padding-left: 0px;
}

现在我想从头开始画线......不是在15px之后

Answer 1

警告： html 元素代表文档的根目录。它的风格不能被覆盖。

它永远不会奏效。设置＆lt;的任何样式（边距，填充，高度，宽度等）后html＆gt; 你当然不能覆盖它，它是为＆lt;中的所有DOM元素设置的html＆gt; 。要么必须使用它，要么必须更改它。它可以使用这行代码

margin-left : -15px;

如果你只想设置＆lt;的风格仅＆lt; html＆gt; 和＆lt;身体＆gt; 。

如果要更改/更新它，可以使用 javaScript / Jquery 来实现。你永远不能覆盖＆lt;的风格html＆gt; 。而且你也不能超出它的范围（＆lt; html＆gt; ）。

html,body{ padding-left : 20px; }

在这种情况下，无论你做什么，你都必须在左侧留下20px，因为你已经设计了＆lt;基础部分。 html＆gt; ，无法覆盖。

但以下情况不同

body{ padding-left : 20px; }

在这种情况下，您可以覆盖＆lt;中的样式身体＆gt; 只是放一些负值。

Answer 2

为什么不试试margin-left: -15px或类似的？盒子模型不允许你从里面的元素覆盖外部填充，但你肯定可以用负边距“突破”它。

或者 - 尽可能避免 - position: absolute;。

Answer 3

如果你想做到这一点，不要将你的填充添加到身体。您希望避免使用包含您并且难以环绕的全局样式，这就是为什么几乎任何专业开发的网站都会使用某种.container元素（或多个此类元素）来包装网站内容。

如果您网站上唯一需要打破15px填充的东西是一个元素，将所有内容包装在容器中并将填充放在那里，然后将整个宽度元素放在该容器之外：

HTML:

<body>

  <div class="container">
    <!-- all of your content goes here -->
  </div>

  <div>
    <!-- stuff that needs to be full width goes here -->
  </div>

</body>


CSS:

.container {
  padding-left: 15px;
}

#footerBar {
  color: #999;
  margin: 0;
  border-top: 10px solid #000;
  width: 100%;
  background-color: #000;
  float: right;
}

您用于html和body的样式不是必需的，因为您应该使用某种css重置（such as normalize）来完成body { margin: 0 }之类的基本内容。我也放弃了其他一些多余的款式。

如何覆盖体型

3 个答案: