Extra space around footer element

Question

I am getting an extra space both below and above my footer on my page, I have tried using margin:0; and padding also but it's still there.

here's my whole html code:

<div id="header">
    <div id="images">
        <img src="f1.png" />
        <img src="linkedin.png" />
        <img src="t1.png" />
        <div id="menu">
            <img src="email1.png" />
            <img src="pen_marker.png" />
        </div>
    </div>
</div>
<div id="main">
    <img src="url.jpg" />
</div>
<div id="footer"></div>

and here's my css part:

you can see the spaces in the image

body {
    margin:0;
}
#header {
    padding:0;
    margin:0;
    width:100%;
    background-color: rgba(0, 0, 0, .7);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .7);
    -moz-box-shadow:0 2px 3px 0px rgba(0, 0, 0, .7);
    -webkit-box-shadow:0 2px 3px 0px rgba(0, 0, 0, .7);
    position: fixed;
}
#menu {
    margin-top: 5px;
    margin-right: 50%;
    float:right;
}
#menu img {
    padding-left:0;
}
#images img {
    margin-left:30px;
}
#main {
    width:100%;
    margin:0;
    padding:0;
}
#main img {
    width:100%;
}
#footer {
    height:60px;
    background-color: #000;
    margin:0;
    padding:0;
}

http://jsfiddle.net/NrxL4/

i am not able to figure out whether its because of inheritance or what.

EDIT:

There is still space below the footer:

enter image description here

Check if you're using the right doctype (use ` ` since you are using HTML5). And try using a [CSS reset](http://www.cssreset.com/) first. — Terry, Oct 09 '13 at 18:01
Isn't that space below the image your `#footer` with `height:60px`? — showdev, Oct 09 '13 at 18:07
Sure looks like it to me. Base fiddle added. http://jsfiddle.net/NrxL4/ — isherwood, Oct 09 '13 at 18:10
@showdave i have given the height 60px and its what i needed , the problem is the space — Rahul Khatri, Oct 09 '13 at 18:12
@isherwood thanks for adding it to fiddle .., in that the space is visible... — Rahul Khatri, Oct 09 '13 at 18:17
You'll have to be more clear about what space you're referring to. — isherwood, Oct 09 '13 at 18:18
exactly 60px is the footer..the problem is the white space between the main image and the footer — Rahul Khatri, Oct 09 '13 at 18:19
I highly recommend you read this: http://stackoverflow.com/questions/3485720/which-html5-reset-css-do-you-use-and-why — gview, Oct 09 '13 at 19:45

showdev · Accepted Answer · 2017-03-13T17:42:24.097

I see what you mean.

By default, images are inline elements.
If you set that image to display:block, the space goes away.

#main img {
    width:100%;
    display:block;
}

Try it below:

body {
  margin: 0;
}

#header {
  padding: 0;
  margin: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .7);
  -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, .7);
  -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, .7);
  position: fixed;
}

#menu {
  margin-top: 5px;
  margin-right: 50%;
  float: right;
}

#menu img {
  padding-left: 0;
}

#images img {
  margin-left: 30px;
}

#main {
  width: 100%;
  margin: 0;
  padding: 0;
}

#main img {
  width: 100%;
  display: block;
}

#footer {
  height: 60px;
  background-color: #00F;
  margin: 0;
  padding: 0;
}

<div id="header">
  <div id="images">
    <img src="f1.png" />
    <img src="linkedin.png" />
    <img src="t1.png" />
    <div id="menu">
      <img src="email1.png" />
      <img src="pen_marker.png" />
    </div>
  </div>
</div>
<div id="main">
  <img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" />
</div>
<div id="footer"></div>

View on JSFiddle

Here is a screen-shot:

enter image description here

thanks a lot for that , it worked! but there is still some white space below the footer how can i get rid of that?? — Rahul Khatri, Oct 09 '13 at 18:28

score 0 · Answer 2 · answered Oct 09 '13 at 18:24

0

Try this

#main img {
width:100%;
display:block;
}

answered Oct 09 '13 at 18:24

Paulie_D

107,962
13
142
161

akshaymanerikar · Answer 3 · 2013-10-09T18:36:49.410

0

SEE this fiddle i have edited this might solve your problem

<div id="footer"></div>

http://jsfiddle.net/NrxL4/2/

edited Oct 09 '13 at 18:36

answered Oct 09 '13 at 18:25

akshaymanerikar

27
1
6

What is the solution? What did you change? – showdev Oct 09 '13 at 18:26
Maybe that's the wrong fiddle link? That seems to be the original code posted by @isherwood. – showdev Oct 09 '13 at 18:30
@showdev i just edited that same fiddle ... check margin-top added to the footer – akshaymanerikar Oct 09 '13 at 18:34
You might have to click "update" to save your changes and generate a new link. I don't see the change. – showdev Oct 09 '13 at 18:35
thanks for the help, I have added margin-top:-05px; to my code but there is still space inn my code as shown in my second screenshot – Rahul Khatri Oct 09 '13 at 18:49
its looking exactly as i wanted as shown in http://jsfiddle.net/NrxL4/2/ .... what have you added beside margin-top:-05px;??? – Rahul Khatri Oct 09 '13 at 18:50
@rahul if you are still getting white space below try adding margin-bottom same way as i have addd margin-top n try – akshaymanerikar Oct 09 '13 at 19:00
i have tried it already, I think its not because of margin bcause margin is the outermost space outside padding , so i guess it should be 0px; its some other thing. – Rahul Khatri Oct 09 '13 at 19:04
@rahul ya might be but when i checked your file on chrome and IE it dint showed me that bottom space... – akshaymanerikar Oct 09 '13 at 19:16

Arshad Ansari · Answer 4 · 2013-10-10T16:32:45.687

0

About the space after footer, I have one question. Are the scroll bars visible? Since I don't see any in the first screenshot. May be the page is not long enough to fit your screen size. Try adding some more content before footer and check if the spacing persists.

Regards

EDIT:

To stick the footer to the bottom use the following code-

footer {
    position:absolute;
    margin:0;
    padding:0;
    bottom:0;
    left:0;
    width:100%;
    /* Include other footer properties */
}

I hope that helps :)

edited Oct 10 '13 at 16:32

answered Oct 10 '13 at 04:27

Arshad Ansari

11
5

hmm i think its true, i dont needed any scroll bar – Rahul Khatri Oct 10 '13 at 11:38
If you want the footer to simply stick to the bottom without getting the scrollbars, you can give the footer absolute positioning and set the bottom and left properties to zero. Also set the width to 100% so the footer expands to full width of the view port. see the edit above – Arshad Ansari Oct 10 '13 at 16:26

score 0 · Answer 5 · answered Sep 24 '21 at 09:08

0

This fixed mine:

body {
margin:0;
padding:0;
width:100%;
}

footer {
display:flex; /* could be block as well */
position:relative;
}

answered Sep 24 '21 at 09:08

nancyeh

1
1

score -2 · Answer 6 · edited May 23 '17 at 10:29

-2

auto position for fixed is top:8; and left:8;. so add

top: 0;
left: 0;

to your #header css.

see this question.

edited May 23 '17 at 10:29

Community

1
1

answered Oct 09 '13 at 18:05

Math chiller

4,123
6
28
44

auto position?? but the space is around the footer – Rahul Khatri Oct 09 '13 at 18:08

Extra space around footer element

EDIT:

6 Answers6