7

I have body style

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

I have a line after footer 

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

Now I want to draw line starting from the beginning ...not after 15px

4

3 回答 3

9

注意： html元素代表文档的根。它的风格不能被覆盖。

它永远不会起作用。在您设置<html>的任何样式（边距、填充、高度、宽度等）后，您当然不能覆盖它，并且它是为<html>内的所有 DOM 元素设置的。要么你必须接受它，要么你必须改变它。使用这行代码就可以了

margin-left : -15px;

如果您只想设置<body>的样式，而不是同时设置<html>和<body>。

如果您想更改/更新它，您可以使用javaScript/Jquery来做到这一点。你永远不能覆盖<html>的样式。而且你也不能超出它的（< html >）范围。

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

在这种情况下，无论你做什么，你都必须在左侧留下 20px，因为你已经设置了基础部分的样式，它是<html>并且不能被覆盖。

但是下面的情况不同

body{
    padding-left : 20px;
}

在这种情况下，您可以覆盖<body>中的样式，只需放置一些负值。

于 2013-10-26T00:59:53.770 回答
2

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

或者——如果可能的话，应该避免—— position: absolute;。

于 2013-10-26T00:40:52.020 回答
1

如果您想正确执行此操作，请不要将填充添加到 body。您希望避免将您困在其中并且难以绕过的全局样式，这就是为什么几乎所有专业开发的网站都会使用某种.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 重置（例如 normalize）来完成基本的东西，例如body { margin: 0 }. 我也放弃了其他一些多余的样式。

于 2013-10-26T02:48:08.203 回答