[CSS] display屬性

display屬性決定了html元素的顯示特性，常見設定值有：inline、block、inline-block、none，這幾個是比較重要且常用的。

將依以下順序介紹：
1、如何區分html標籤是屬於行內元素(inline)或區塊元素(block)
2、inline-block
3、display:none與visibility:hidden的差異

一、如何區分html標籤是屬於行內元素或區塊元素

只要你將兩個相同元素寫下來後，看第二個會不會段行，就可以知道該元素是屬於inline行內元素或是block區塊元素了，例：

  
    
    
  

  
    

      
這是段落一
      
這是段落二
      這是連結一
      這是連結二
    
  

顯示如圖，可見

是block區塊元素(因為會斷行)、是inline行內元素(在同一行內繼續顯示，沒有斷行)：

另外要注意的是，當一個元素是inline行內元素時，就無法使用margin-top、margin-bottom、height，就算你設定了，其實也不會有任何效果喔。當然你可以將改成區塊元素(display:block)，這樣它就擁有block區塊元素的特性(會斷行、可設定margin-top、margin-bottom、height)。

二、inline-block

例如以上範例的元素，我們希望它不要斷行，但能擁有block區塊元素的特性，只要將它設定成display:inline-block這個行內區塊元素即可。例：

.link{
  border:1px solid red;

  display: inline-block;  /* 新增這行，設定行內區塊元素(inline-block) */
  margin-top:100px;       /* 這增這行，這時設定margin-top就會有其效果了 */
}

三、display:none與visibility:hidden的差異

以上的.para修改成以下：

.para{
  border:1px solid black;

  display:none;  /* 新增這行 */
}

顯示如圖：(會發現

消失了，且連結的部份會往上移取代原先

的位置)

若將.para修改成以下：

.para{
  border:1px solid black;

  visibility: hidden;  /* 新增這行 */
}

顯示如圖：(會發現

雖然消失了，但仍”佔位”原來的位置)
​

參考資料：
htmldog：Display

如果文章對您有幫助，請您不吝分享，
這將是我繼續寫下去的原動力啊！感謝。