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

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

---

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

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

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

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

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

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

---

CSS3를 사용하면 box-sizing 속성을 사용 하여 브라우저가 입력 너비를 계산하는 방법을 변경할 수 있습니다 .

  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+ */
  }

자세한 내용은 여기를 참조하십시오 : http://css-tricks.com/box-sizing/

---

크로스 브라우저와의 호환성 (파이어 폭스와 사파리에서 작동)을 모르겠지만이 솔루션을 시도 할 수 있습니다.

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

(변경 한 값만 게시)

---

하나의 옵션은 패딩이 있는를 감싸는 것 INPUT입니다 DIV.

CSS :

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%;
}

HTML :

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

---

잊혀진 사람들 calc은 여기서 구출 할 수 있습니다.

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

패딩이 요소의 너비에 추가된다는 것을 알고 있으므로 전체 너비에서 패딩을 빼기 만하면됩니다. 모든 주요 브라우저에서 지원되며 반응이 좋으며 지저분한 래퍼 div가 필요하지 않습니다.

---

이와 비슷한 문제가 발생했습니다. 100 %의 입력과 작은 패딩을 가진 tds가 있습니다. 내가 한 것은 다음과 같이 td의 패딩을 보상하는 것입니다.

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

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

입력 / 텍스트 영역의 테두리와 패딩을 포함하도록 8px의 패딩. 도움이 되었기를 바랍니다!

---

아마도 border + background를에서 빼고 input대신 divborder + background 및 width : 100 %로 묶고 input?에 여백을 설정하십시오 .

---

내가 찾은 한 가지 해결책은 입력을 상대적으로 배치 된 부모 태그로 절대적으로 배치하는 것입니다.

<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;
}

The only thing to be aware of is that the paragraph tag needs a height setting as its absolutely positioned children will not expand its height. This avoids the need to set width: 100% by locking it to the left and right sides of the parent element.

---

Try using percentages for your padding:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

If you're worried about users on old browsers who can't see the box-shadow, just give the input a subtle background colour as backup. If you're using pixels for this sort of thing, then the chances are you're using them elsewhere, which could present a few extra-challenges, let me know if you encounter them.

---

Only thing I know to prevent this is assign values like that 100%-10. But it has some compatibility issues tho.

참고URL : https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100