如何删除div和页面之间的空格

时间:2012-09-06 18:37:24

标签: html css css3

当浏览器大小变小时,我会在div和浏览器窗口边缘之间的右侧获得一个空格。如何删除该空间?

我的屏幕截图在这里 https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/538697_4098812043002_480328736_n.jpg

我的编码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="c.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #0CF;
    background-image:url(tile.png);
    background-attachment:fixed;
    background-repeat: repeat;


}
</style>
</head>

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
<div id="dd" style="background-color:#0094d6; width:100%; height:75px;" class="center div_border"><div id="a" style="width:967px; height:75px; background-color:#000000;background:url(xx.png); font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#003; " class="inner">

  <table width="100%" border="0" >
    <tr >
      <td width="1%" height="14">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
      <td width="12%">&nbsp;</td>
      <td width="32%">&nbsp;</td>
      <td width="5%">&nbsp;</td>
      <td width="1%">&nbsp;</td>
      <td width="7%">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td colspan="3"><div style="background-color:#006d9e;border-radius:3px; width:250px; height:34px; display: table;
vertical-align: middle; color:#FFF; ">
        <table width="100%" border="0" >
          <tr >
            <td width="43%" style="text-align:center"> Start to bump !</td>
            <td width="29%"><input name="login_btn" type="submit" class="login_button" id="login_btn" value="Log in" /></td>
            <td width="28%"><input name="register_btn" type="submit" class="register_button" id="register_btn" value="Register" /></td>
          </tr>
        </table>
      </div></td>
      </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td style="color:#FFF; font:Arial, Helvetica, sans-serif; font-size:9px; text-align:right;">Beta Version</td>
      </tr>
  </table>

</div></div>
<div class="center box2" style="width:967px;background-color:#f1f5f6;">
<div style="width:967px; height:75px;">


</div>
<div id="aa" class="center" style="width:967px">
<p> ***********START**********************************lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
 lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
   lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumrem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>


    </div>
    </div>
<div id="dd" style="background-color:#0094d6; width:1366; height:45px; " ><div id="a" style="width:967px; height:45px; background-image:url(footer.png); position:relative;"class="inner"   >
<table width="100%" border="0">
        <tr>


          <td>&nbsp;</td>
          <td style="font-family:Arial, Helvetica, sans-serif;font-size:10px; color:#FFF; text-align:center">  Copyright © LCB 2013, All rights reserved. </td>
          <td>&nbsp;</td>
        </tr>
        <tr >
          <td width="30%">&nbsp;</td>
          <td width="43%">&nbsp;</td>
          <td width="27%">&nbsp;</td>
        </tr>
      </table>
</div>

</div>
</body>
</html>

4 个答案:

答案 0 :(得分:2)

在你的css文件中试试:

* { 
    margin:0;
    padding:0;
  }

答案 1 :(得分:0)

删除你身体标签上的topmargin,bottommargin,左右边距,然后简单地加上margin:0;你的身体风格在标题中。

答案 2 :(得分:0)

在你的网页中使用reset.css。重置所有浏览器中的所有css属性。

答案 3 :(得分:0)

始终使用css重置。有很多,但我喜欢使用由Eric Meyer创建的:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}​

哦,拜托!不要使用内联样式!