웹 페이지의 모양이 망가져 있습니다.

Question

웹 페이지가 시작되었지만 문제가 있습니다. 로그인 양식을 시작하기위한 정보가있는 양식을 추가했습니다. 폼에 여백과 패딩을 추가하려고 시도했지만 여전히 완전히 엉망입니다. 엉망이 된 영역의 코드와 폼이 있습니다.

<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;"> 
    <div style="width:20%;display:inline-block;text-align:left;border: 2px green solid;"></div> 
    <div id="paddingLeft" style="width:4%;display:inline-block"></div> 
    <div style="display:inline-block; width: 50%;"></div> 
    <div id="paddingRight" style="width:4%;display:inline-block"></div> 
    <div id="loginTitle" style="display:inline-block; width: 20%;border:2px green solid;text-align:center;" class="style1">Login</div> 

    <div style="width:20%;display:inline-block;text-align:left;height:100px;border: 2px green solid;"></div> 
    <div id="paddingLeft2" style="width:4%;display:inline-block;height:100px;"></div> 
    <div style="display:inline-block; width: 50%;height:100px;"></div> 
    <div id="paddingRight2" style="width:4%;display:inline-block;height:100px;"></div> 
    <div id="loginFormArea" style="display:inline-block; width: 20%;height:100px;border:2px green solid;text-align:center;"> 
     <form method="get" id="loginForm" style="height: 100%;padding:2px"> 
      <span class="style1" id="Username" style="display:inline-block; width:40%;">Username:</span> 
      <input id="usernameInput" name="Text1" type="text" style="width:40%;display:inline-block;margin-top: 5px;height:15px" /> 
     </form> 
    </div> 
</div> 

Answer 1

이 시도 :

<div id="bodywrapper" style="width:100%;height:1000px;margin-top: 5px;"> 

대신 :

<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;"> 

나의 제안은 다음과 같습니다

• 이 사업부 "몸"의 ID를 호출하지 않습니다. body은 html의 구조 요소입니다.
• 왼쪽 및 오른쪽 여백을 제거하십시오. 이미 너비가 100 %라고 말했기 때문에, 그것에 마진을 추가하는 것은 예측할 수 없습니다. 원한다면 패딩을 대신 추가 할 수 있습니다. 그게 당신이 찾고있는 효과가있을 수 있습니다.