padding

• padding是可以使Document內部不會與其內容的Document黏在一起的用法。
  
• 這是沒加上padding的狀態，以下是有的可以看到邊框與中間的內容相隔了20px。
  
  

margin

• margin與padding可以說是攣生兄弟，一個是調整內部，一個是調整外部，如下圖。
  
  

以上兩個是排版上面非常重要的功能。而且如果是有用bootstrap的話，只需要在class加上p-20 m-20就可以有這個效果，非常好用。

position

• position也屬於css屬性的一種，可以賦予的是static、relative、absolute、fixed、sticky。
• static：這是元素的默認定位方式。不受 top、right、bottom 和 left 屬性的影響。z-index 屬性對靜態定位的元素無效。
• relative:允許你使用 top、right、bottom 和 left 屬性相對於元素自身的原始位置進行定位。元素在頁面上的布局仍然保留其原始空間，不會影響其他元素的布局。可以z-index。
• absolute: 定位允許你將元素相對於其最近的已定位（非 static）祖先元素進行定位。元素的位置會完全脫離文檔流，不再佔用原始空間，可能會覆蓋其他元素。使用 top、right、bottom 和 left 屬性來精確控制元素的位置。可以 z-index 。
• fixed 定位允許你將元素相對於瀏覽器窗口進行定位。元素會在頁面滾動時保持在固定位置，不受滾動影響。使用 top、right、bottom 和 left 屬性來確定元素的位置。常用於創建固定導航欄或懸浮元素。
• sticky: 定位結合了 relative 和 fixed 的特性。元素會按照正常文檔流布局，直到達到指定的偏移位置，然後變為固定定位，保持在該位置，直到父容器滾動到一定位置。通常用於創建粘性導航欄或側邊欄。
  

width、height

• 高度、寬度、最大、最小，是排版上面也很重要的一個功能，但因為裝置的不同很容易出錯，舉個例子。下圖是在pc端用edge顯示的網頁。
  
• 可以看到是算蠻正常的一個網頁，只是有點醜。此時如果使用者的裝置改成手機之類的裝置，會變成下圖，此時是因為固定寬度的原因。