[css] 입력 내 패딩은 너비 100 %를 끊습니다.

자, 우리는 객체에 패딩을 설정하면 너비가 명시 적으로 설정되어 있어도 너비가 변경된다는 것을 알고 있습니다. 이것에 대한 논리를 논할 수는 있지만, 일부 요소에 문제가 발생합니다.

대부분의 경우 하위 요소를 추가하고 100 %로 설정된 요소 대신 해당 요소에 패딩을 추가하지만 양식 입력의 경우 가능한 단계가 아닙니다.

이것을보십시오 : http://sandman.net/test/formcss.html

두 번째 입력의 패딩은 5px로 설정되어있어 기본 설정보다 훨씬 선호합니다. 그러나 불행히도 100 % 너비에 10px를 추가하는 것을 포함하여 모든 방향으로 입력이 10px 커집니다.

여기서 문제는 입력 내에 자식 요소를 추가 할 수 없어서 수정할 수 없다는 것입니다. 따라서 질문은 다음과 같습니다.

너비를 100 %로 유지하면서 입력 내부에 패딩을 추가하는 방법이 있습니까? 양식이 다른 너비의 부모로 렌더링되므로 부모의 너비를 미리 알 수 없으므로 100 % 여야합니다.

답변

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

<p class="full-width-input">
    <input type="text" class="text />
</p>

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}