Jump to content

How To Remove The Bottom Margin Of The Body?


tinfanide
 Share

Recommended Posts

Here's my css codes:How can I remove the margin-bottom?

body {margin: 0 auto;padding: 0; margin-top: 0px;margin-bottom: 0px;text-align: center;width: 1024px;border: 1px solid #CC00FF;border-top: 0px;border-bottom: 0px;}div#wrapper {background-color: #FFC;width: 1024px;height: 768px;overflow: auto;margin: 0 auto;position: relative;text-align:left;}#flashSlideShow {position: absolute;left: 100px;top: 100px;}div#footer {margin: 0 auto;width: 1024px;height: 250px;}#flashContent { width:100%; height:100%; }

<body><div id="header"></div><div id="wrapper">  <div id="flashSlideShow">   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="720" height="480" id="" align="middle">    <param name="movie" value="" />    <param name="quality" value="high" />    <param name="bgcolor" value="#ffffff" />    <param name="play" value="true" />    <param name="loop" value="true" />    <param name="wmode" value="window" />    <param name="scale" value="showall" />    <param name="menu" value="true" />    <param name="devicefont" value="false" />    <param name="salign" value="" />    <param name="allowScriptAccess" value="sameDomain" />    <!--[if !IE]>-->    <object type="application/x-shockwave-flash" data="" width="720" height="480">	 <param name="movie" value="" />	 <param name="quality" value="high" />	 <param name="bgcolor" value="#ffffff" />	 <param name="play" value="true" />	 <param name="loop" value="true" />	 <param name="wmode" value="window" />	 <param name="scale" value="showall" />	 <param name="menu" value="true" />	 <param name="devicefont" value="false" />	 <param name="salign" value="" />	 <param name="allowScriptAccess" value="sameDomain" />    <!--<![endif]-->	 <a href="http://www.adobe.com/go/getflash">	  <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />	 </a>    <!--[if !IE]>-->    </object>    <!--<![endif]-->   </object>  </div></div><div id="footer"><img src="" /></div></body>

Link to comment
Share on other sites

you should not any margin at bottom as you have it set to zero Twice! body {margin: 0 auto;padding: 0; margin-top: 0px;margin-bottom: 0px;text-align: center;width: 1024px;border: 1px solid #CC00FF;border-top: 0px;border-bottom: 0px;}Are you talking about the space produced by footer? height: 250px;

Link to comment
Share on other sites

Yes. I'm talking about the little space (just a little) beneath the footer.After I set the body margin: 0 and padding: 0there's still some white space.

Link to comment
Share on other sites

Obviously Not! as there's only an image. To clarify if you had elements, such as p, h1-h6, and the footer had top and bottom margin less than these elements, there margins would seep pass the edge of footer element causing it to move by these inner child elements top and bottom margins, it is known as collapsing-margins , which can be fix by using overflow: hidden; or adding 1px top and bottom padding to the footer element. Also because you have a fixed height footer, the image height if higher, would cause the bottom edge to extend beyond the footer bottom edge causing a gap, which can also be fixed by overflow:hidden;

Link to comment
Share on other sites

No, the code is not a sample code. Just wipe out the img src to keep some pivacy.Maybe it's the image height problem. Anyway, overflow: hidden is a quick fix.

Link to comment
Share on other sites

According to your CSS; your page has a fixed height of 768 + 250 = 1018 pixels. That's certainly going to exceed the bottom of the window in most screens. On my sites, I don't settle for quick fixes because they could come back to haunt you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...