Jump to content

How To Remove The Bottom Margin Of The Body?


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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...