패딩과 함께 100 % 너비 입력

Question

왼쪽/오른쪽 패딩이 10px이고 그 부모만큼 넓은 텍스트 영역/입력을 만드는 방법.

textarea,input{ 
    padding:5px 10px 5px 10px; 
    width:100%; 
} 

이 경우 입력이 더 넓습니다.

Answer 1

CSS 코드에 여백 속성을 추가하십시오.

Answer 2

아, 좋은 옛날 Box Model. 여백은 여백에 추가되므로 원하는 효과를 얻으려면 여백에 백분율을 사용해야합니다. 이 시도 :

textarea, input { 
    padding: 1% 2% 1% 2%; 
    width: 96%; 
} 

Answer 3

textarea{ 
     box-sizing: border-box; 
     width:100%; 
     padding: 10px 
    } 

Answer 4

확인해 볼 수 있습니다 내

Demo on jsFiddle 관련 문제 answer :

HTML 마크 업 :

<div class="input_wrap"> 
    <input type="text" /> 
</div> 

CSS :

div { 
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */ 
} 

input { 
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px; 
    border: none; 
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}