How to override body style

Question

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

Answer 1

Caution : The html element represents the root of a document. It's style can't be overridden.

It'll never work. After you set any style (margin, padding, height, width etc) of < html > you certainly can't override it and it is set for all DOM elements inside < html >. Either you have to go with it or you have to change it. It would've worked using this line of code

margin-left : -15px;

if you would just set the style of the < body > only rather than both < html > and < body >.

If you want to change/update it you can do that using javaScript/Jquery. You can never override the style of < html >. And neither you can go out of it's(< html >) scope.

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

In this case whatever you do, you are bound to leave 20px on left side as you've styled the base part which is < html > and which can't be overridden.

But the following case is different

body{
    padding-left : 20px;
}

In this case you can override the style inside < body > just putting some negative value.

Answer 2

Why not try margin-left: -15px or similar? The box model won't allow you to override the outer padding from an element inside it, but you can certainly "break through" it with negative margins.

Alternatively -- and to be avoided if possible -- position: absolute;.