How to solve the problem of height inconsistency in css

Methods to solve high inconsistencies in css: 1. Add "box-sizing: border-box;" to the input; 2. Add "box-sizing: content-box;" to the button.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to solve the problem of high inconsistency in css?

The reasons and solutions for the inconsistent heights of input and button in css

First let’s talk about the reasons for the inconsistent heights of input and button

Before I encountered such a small problem when I was studying a react project and writing a todolist. I checked some information and found that there are all kinds of things on the Internet. After checking the information, I found that the alignment was because the baselines of the inline elements were different, so Will lead to different levels. The solution is also very simple, just add ↓ to each element.

    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="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/020/cec56ed3d20bb9d7f957189764ecf811-0.png?x-oss-process=image/resize,p_40"  class="lazy"  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>

##Then let’s talk about the reason why the input height is two pixels higher than the button

Button always uses Quirks for height calculation model. In Quirks mode, the border is calculated within the width of the element, rather than outside like standard mode (the height of the button includes the height of the border, while the text box text does not include the border height.)

The solution is also very simple, just add ↓

    box-sizing: border-box;

to the input or add ↓ to the button.

    box-sizing: content-box;

Hope it can be solved for everyone Doubts=(:з　∠)_

Recommended study: "

css video tutorial"

The above is the detailed content of How to solve the problem of height inconsistency in css. For more information, please follow other related articles on the PHP Chinese website!