div와 페이지 사이의 공백을 제거하는 방법

브라우저 크기가 작 으면 div와 브라우저 창 여백 사이의 오른쪽에 공백이 생깁니다. 어떻게 공백을 제거 할 수 있습니까?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>

출처

2012-09-06 Lahiru_B

나를위한 공간이 없습니다 : http://codepen.io/hmartiro/pen/ntGAB. 그러나 공간을 마우스 오른쪽 버튼으로 클릭하고 Chrome에서 '요소 검사'를 선택하면 원인을 찾을 수 있습니다. –

브라우저 창 크기가 작을 때만 나타납니다. 브라우저 창 크기를 작게 만들어보십시오. –

문제는 배경 이미지가 이미지를 제거하고 한 번 시도해보십시오. – mani

제거 코딩 당신의 topmargin, bottommargin, 왼쪽 몸 태그에 오른쪽 여백 단순히 마진 넣어 : 0; 여기서 당신의 몸 스타일이 머리말에 있습니다. CSS 파일의 시도에서

출처

2012-09-06 19:03:10 moose

: 당신의 page.it에

* { 
    margin:0; 
    padding:0; 
    }

출처

2012-09-06 19:06:34 Phil

이미 추가했습니다. 그러나 잘 모르겠어요 –

사용 reset.css 모든 browswer에있는 모든 CSS 속성을 다시 설정합니다.

출처

2012-09-06 19:07:54

어떻게 사용할 수 있습니까? –

이 사이트 http://meyerweb.com/eric/tools/css/reset/를 방문하여 css 데이터를 seperat css 파일에 복사하고 페이지에 파일을 추가하십시오. –

항상 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: "" ""; 
}

오, 제발! 인라인 스타일을 사용하지 마십시오!

출처

2012-09-06 21:15:27

div와 페이지 사이의 공백을 제거하는 방법

답변

관련 문제