我将DOM元素的高度全部设置为相同的var，但它们看起来有不同的高度？

Question

我将所有三个元素设置为相同的高度var，但每个元素略大于最后一个元素。到底是怎么回事？ var是itemsh。

class LogoBar extends React.Component {
  render() {
    return (
    <div style= {{ width: '100%', height: '80px', background: 'black'}}>
      <img src={mylogo} style={{marginLeft: '20%', float: 'left'}}/>
      <Login width='1200px' height='200px' bgc='black'/>
    </div>
   );
  }
}

class Login extends React.Component {
  render() {
  let h = parseInt(this.props.height.slice(0, this.props.height.length-2), 10);
  let mTop = Math.ceil(h / 10) + 'px';
  let fbh = Math.ceil(h*.8);
  let fbmTop = Math.ceil(fbh*.2);
  let flexboxheight = fbh + 'px';
  let flexboxmargtop = fbmTop + 'px';
  let itemsh = Math.ceil(fbh*.4) + 'px';

  return (
    <div style={{background: this.props.bgc, height: this.props.height, float: 'right', width: this.props.width}}>
      <button style={{float: 'right', marginRight: '30%', marginLeft: '5px', marginTop: mTop, height: itemsh}} onClick={()=>{return 1;}}>Login</button>
      <div style={{display: 'flex', height: flexboxheight, width: '180px', justifyContent: 'start', flex: '1', flexDirection: 'column', float: 'right', alignItems: 'flex-end', marginTop: mTop}}>
        <input type='text' value='password' style={{width: '175px', height: itemsh}}/>
        <a href='https://someotherplace.com' style={{marginTop: flexboxmargtop, height: itemsh}}>Forgot password?</a>
      </div>
      <input type='text' value='username' style={{float: 'right', marginRight: '5px', marginTop: mTop, width: '175px', height: itemsh, textHeight: itemsh}}/>
    </div>
   );
  }
}

Answer 1

我明确地将所有填充设置为＆＃39;填充：＆＃34; 0px＆＃34;＆＃39;它们看起来都一样。我猜想元素的默认填充不能保证一致。

实际上并没有完全修复它。后来＆＃34; flex-shrink＆＃34;抬起头来。我不得不设置flexShrink：＆＃39; 0＆＃39;在flexbox内部输入。