CSS의 높이 불일치 문제를 해결하는 방법

CSS의 높은 불일치를 해결하는 방법: 1. 입력에 "box-sizing: border-box;"를 추가합니다. 2. 버튼에 "box-sizing: content-box;"를 추가합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS의 높이 불일치 문제를 해결하는 방법은 무엇입니까?

CSS에서 입력 높이와 버튼 높이가 일치하지 않는 이유와 해결 방법

우선 입력 높이와 버튼 높이가 일치하지 않는 이유에 대해 이야기해 봅시다

학습할 때 아주 작은 문제에 부딪혔습니다. 리액트 프로젝트를 하고 할 일 목록을 작성하다 보니 인터넷에서 정보를 좀 찾아봤는데, 정보를 확인해 보니 행에 있는 요소들의 기준선이 맞지 않아서 그런 것 같았습니다. 다르기 때문에 높이도 달라집니다. 해결책도 매우 간단합니다. 각 요소에 ↓를 추가하기만 하면 됩니다.

    vertical-align:middle;

.target {
    vertical-align:middle;
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    box-sizing: border-box;}.red-btn {
    vertical-align:middle;
    width: 100px;
    height: 30px;
    background: lightcoral;
    color: #fff;}

      <Fragment>
        <p className="App">
          <p className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
          </p>
          <p>
          <input className=&#39;target&#39; value={this.state.inputValue} onChange={this.handleInputChange} />
          <button className=&#39;red-btn&#39; onClick={this.handleBtnClick}>add</button>
          </p>
          <ul>
            {
              this.getTodoItems()
            }          </ul>
        </p>
      </Fragment>

그런 다음 입력 높이가 버튼보다 2픽셀 높은 이유에 대해 이야기해 보겠습니다.

버튼은 높이 계산을 위해 항상 Quirks 모드를 사용합니다. Quirks 모드에서는 표준 모드처럼 외부가 아닌 요소 너비 내에서 테두리가 계산됩니다. (버튼 높이에는 테두리 높이가 포함되지만 텍스트 상자 텍스트에는 테두리 높이가 포함되지 않습니다.)

해결책 또한 매우 간단합니다. 입력에 ↓

    box-sizing: border-box;

를 추가하거나 버튼에 ↓를 추가하기만 하면 됩니다.

    box-sizing: content-box;

그것으로 의심이 사라질 수 있기를 바랍니다=(:з　∠)_

추천 학습: " css 동영상 튜토리얼》

위 내용은 CSS의 높이 불일치 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!