CSS 寬度與高度

高度與字體（內聯元素）

• 字體之間通過基線對齊
• 當div包含一個內聯元素，他的高度由字體的行高確定
• 默認行高是設計師設計字體時的建議行高。

空格（內聯元素之間）
&nbsp no break space
兩個inline元素之間有任何回車，tab，換行或其他任意字符，都會變成空格。
因而導航欄li元素橫排不要使用inline-block方法，用float+清除浮動。

中文的對齊方式技巧

文字垂直居中
用line-height加padding，不要用height = line-height，因爲height = line-height只能居中一行。

margin上下合併
父元素有padding或border，上下margin就不會合並。

div垂直水平居中

<style>
    .child{
      border: 5px solid orangered;    
      text-align: center;
      width: 150px;
      margin: 0 auto; ///////////////////
    }
    .parent{
      outline: 3px solid green;
      padding: 100px 0;  /////////////////////
    }
  </style>

用flex佈局

.parent{
    justify-content: center;
    align-items: center;
}

文字溢出省略

white-space:nowrap
overflow:hidden
text-overflow:ellipsis

總結：
DIV的高度是由它內部文檔流的總和決定的