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

Question

当浏览器尺寸变小时，我在 div 和浏览器窗口边距之间的右侧有一个空格。如何删除该空格？

我的屏幕截图在这里 https://fbcdn-sphotos-ga.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>

score 2 · Accepted Answer

2

在您的 css 文件中尝试：

* { 
    margin:0;
    padding:0;
  }

于 2012-09-06T19:06:34.600 回答

score 0 · Accepted Answer

删除你的正文标签上的上边距、下边距、左右边距，然后简单地放置边距：0；在您的身体风格在标题中的位置。

score 0 · Accepted Answer

始终使用 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: "" "";
}

哦拜托！不要使用内联样式！

score 0 · Accepted Answer

0

在您的页面中使用 reset.css。它会重置所有浏览器中的所有 css 属性。

于 2012-09-06T19:07:54.293 回答

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

4 回答 4

Related

Reference