CSS 폭

Question

나는 다음과 같은 HTML5와 CSS 코드를 가지고 : 섹션 입력 태그의 폭이 동일하지만

section { 
 
    width: 200px; 
 
    background-color: blue; 
 
} 
 

 
input { 
 
    display:block; 
 
    margin-bottom: 10px; 
 
    width: 200px; 
 
} 
 

 
input[type=submit] { 
 
    width:100px; 
 
    margin: 0 auto 0 auto; 
 
}

<section> 
 
    <form> 
 
    <input type="text" placeholder="Regular text here!" /> 
 
    <input type="number" placeholder="This is a number" /> 
 
    <input type="tel" placeholder="Your phone here."/> 
 
    <input type="email" placeholder="Your email here." /> 
 
    
 
    <input type="submit" /> 
 
    
 
    </form> 
 
</section>

을 (200 픽셀) 파란색을 섹션 배경의 색이 입력을 완전히 포함하지 않습니다. 왜 그런 일이 일어나는거야?

Answer 1

처음에는 border이 있고 이는 input 요소 주위에 추가됩니다. 을 사용하여 border이 지정된 width 안에 들어가도록 할 수 있습니다.

section { 
 
    width: 200px; 
 
    background-color: blue; 
 
} 
 
input { 
 
    display:block; 
 
    margin-bottom: 10px; 
 
    width: 200px; 
 
    box-sizing: border-box; 
 
} 
 
input[type=submit] { 
 
    width:100px; 
 
    margin: 0 auto 0 auto; 
 
}

<section> 
 
    <form> 
 
    <input type="text" placeholder="Regular text here!" /> 
 
    <input type="number" placeholder="This is a number" /> 
 
    <input type="tel" placeholder="Your phone here."/> 
 
    <input type="email" placeholder="Your email here." /> 
 
    <input type="submit" /> 
 
    </form> 
 
</section>