css與react.js的奇怪行爲

我面對我的web應用程序的真正奇怪（對我）行爲。應用程序的型號是：css與react.js的奇怪行爲

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

，我得到各個TaskElement下奇怪的白色間隙喜歡上圖：

任務元素渲染中的代碼的反應是：

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呈現代碼差距DISAPPEAR。那裏發生了什麼？

前的差距消失：

和。加入到這裏的代碼：回報（

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

來源

2016-01-23 Syberic

介意分享您的樣式:)你想要哪些 –

@MichelleTilley。？所有的代碼都在https://github.com/feijihn/todolist_react，如果你想探索一些螢火蟲，你也可以去84.23.33.186:3000 – Syberic

請幫助我們在你的html樣本中的類的樣式，所以我們不不需要掃描所有的CSS。 – LGSon

你taskElement是inline-block因此增加vertical-align: top它應該做的伎倆

來源

2016-01-23 21:42:28 LGSon

它做到了！我將不勝感激任何解釋，因爲我仍然不明白這些差距的起源 – Syberic

本文很好地描述它：https://css-tricks.com/fighting-the-space-between-inline-block-元/ – LGSon

css與react.js的奇怪行爲

回答

相關問題