带有 react.js 的 CSS 的奇怪行为

Question

我的网络应用程序的行为非常奇怪（对我来说）。 应用型号为：

|-TaskBox
  \
   |-TaskList
     \
      |-TaskElement
      |-TaskElement
  \
   |-AddNewTask

而且我在每个 TaskElement 下都有奇怪的白色间隙，就像图片上一样：

react中渲染任务元素的代码是：

return (
    <div className="taskElement" style={this.state.style}>
        <div className="textArea">
            <p>{this.state.text}</p>
        </div>
        <div className="iconsArea">
            <i className="material-icons" onClick={this.toEditMode}>mode_edit</i>
            <i className="material-icons" onClick={this.Delete}>delete</i>
            <i className="material-icons">keyboard_arrow_down</i>
            <i className="material-icons">keyboard_arrow_up</i>
        </div> 
     </div>
);

我不知道为什么会出现这种空白，但是当我向 xml 渲染代码空白添加任何纯文本符号时，代码空白消失了。那里到底发生了什么？

ex of gaps 消失：

和 .在此处添加到代码中： 返回（

<div className="taskElement" style={this.state.style}>
            <div className="textArea">
                <p>{this.state.text}</p>
            </div>
            <div className="iconsArea">
                <i className="material-icons" onClick={this.toEditMode}>mode_edit</i>
                <i className="material-icons" onClick={this.Delete}>delete</i>
                <i className="material-icons">keyboard_arrow_down</i>
                <i className="material-icons">keyboard_arrow_up</i>
       </div> .  (this is the dot i added)
       </div>
    );

Answer 1

您的taskElement 是inline-block，因此添加vertical-align: top 应该可以解决问题。