CSS 너비가 정확하지 않습니다/나에게 이해가되지 않습니다

Question

너비가 60 % 인 콘텐츠 섹션이 있습니다. 위의 경우 40 % 너비의 텍스트 입력이 있습니다. 해당 입력 필드 옆에 제출 버튼이 있습니다. 내 수학 지식에 따르면, 입력 필드와 내용 섹션은 모두 같은 너비를 가져야합니다. | _________ 40 % _________ || ____ 20 % ____ |
| _______________ 60 % ________________ |
하지만 그건 사실이 아닙니다.
HTML :

<input id="plannername" placeholder="Name eingeben" type="text"></input><!-- 

--><input id="plannersubmit" type="submit" value="eintragen"></input> 

<div id="content"></div> 

CSS :

#plannername{ /* The text input */ 
    width:40%; 
    background-color:#9eefbc; 
    margin-left:20%; 
    border:0; 
    font-size:2em; 
    padding:20px; 
} 
#plannersubmit{ /* The submit button */ 
    width:20%; 
    background-color:#6dce91; 
    border:0; 
    font-size:2em; 
    padding:20px; 
    transition:.2s ease-in-out; 
} 
#content{ 
    width:60%; 
    background-color:#9eefbc; 
    height:500px; 
    margin-left:20%; 
    padding-top:70px; 
    margin-top:3px; 
} 

내 전체 코드가 여기에 있습니다 : http://codepen.io/tobiasglaus/pen/xgBeaJ

Answer 1

당신은, 입력 상자에 padding 세트가 그것에게 전체 폭의 일부를 만들기 위해, 당신은 box-sizing: border-box;을 설정하거나 보편적으로 설정할 수 있습니다.

* { 
    box-sizing: border-box; 
} 

의사 요소를 포함 일반적인 방법은 다음과 같습니다

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

참고, 또한 당신이 수동으로 설정하지 않은 경우에도 입력 요소의 대부분의 브라우저에서 설정 몇 가지 기본 패딩 및 테두리가있다. 위의 해결 방법은 계속 적용됩니다.

Answer 2

패딩을 수용하려면 box-sizing: border-box을 사용해야합니다.

* { 
    box-sizing: border-box; 
} 

을 또는 필요에 따라 개별 div 년대에 추가 할 수 있습니다 : 다음과 같은 추가하십시오.