Kelly Stone ❣

#fb .feedback-info {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dadde1; /**底線**/
  margin: 10px 12px 0 12px;
  padding: 0 0 10px 0;
}

#fb .feedback-info .emojis {
  min-width: 100px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

#fb .feedback-info .threads {
  font-size: 14px;
}

/*flexbox 的方法，先將元件置中，然後使用 justify-content: space-around 的設定，讓元素展開在左右兩側*/

#fb .feedback-interaction {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  height: 32px;
  color: #606770;
  margin: 0 12px;
  min-height: 32px;
  padding: 4px 0;
}

#fb .fb-wrapper {
  displex: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 32px;
}

/**回到圖示上。為了讓之後被加入的圖示能夠和對應的文字一起對齊中心，所以我們先加個 flex 排版：**/

/*hover為當游標移到物件上方時**/

#fb .feedback-interaction .fb-wrapper:hover {
  background-color: rgba(29, 33, 41, 0.04);
  border-radius: 2px;
  text-decoration: none;
}

#fb .feedback-interaction div {
  cursor: pointer;
}

/**這樣在 feedback-interaction 底下的這三個 div 結構，都可以吃到 cursor 的設定了。**/

#fb .feedback-interaction .fb-wrapper .fb-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  margin: 0 6px 0 0;
}

/**display:inline就會使得原本div的block改變成inline屬性，排版不會隨著設定改變，字仍在行內，其他行並不會被推開**/

/**display:block: div原屬性即為block，雖然設定寬高/padding/margin，但屬性仍會向右占滿容器，下個元素就會換行來呈現，並不會並排**/

/**display:inline-block : 即可同時擁有block可設定寬高的屬性，但其排版仍像inline屬性，並不會向右占滿整個容器**/