margin和padding的區別和用法

本文轉載於:猿2048網站margin和padding的區別和用法

margin和padding的區別和用法

什麼是margin、padding？

　　marigin：就是外邊距。padding：就是內邊距。怎麼就容易記住二者呢？

　　馬蓉你們都知道吧，給王寶強帶帽子的那位，假如你認識了馬蓉是否是想離他遠點呢？而馬蓉的拼音是marong，是否是和margin特別像呢？那麼你看着maring是否是就知道了margin是外邊距呢？

　　那麼padding就更容易記住了，panda是熊貓你們都是知道吧，熊貓是咱們中國的國寶並且都很可愛，因此看見padding就知道了是內邊距是吧。

margin和padding的用法

margin-top	設置元素的上外邊距
padding-top	設置元素的上內邊距
margin-left	設置元素的左外邊距
padding-top	設置元素的左內邊距
margin-right	設置元素的右外邊距
padding-right	設置元素的右內邊距
margin-bottom	設置元素的下外邊距
padding-bottom	設置元素的下內邊距

除了這幾種方法外還有其餘的方法嗎？

　　固然是有的，margin和padding都是簡寫屬性他們能夠直接在裏面設置他們的屬性。即：margin/padding：值 。可是這個樣子寫的話都把全部的值都設置了還能讓其餘的值都單個的寫嗎？方法是有的：

1. margin/padding：值1 值2 值3 值4   //設置元素上右下左的內/外邊距
2. marign/padding：值1 值2　　　　  //設置元素上下、 左右的內/外邊距
3. marign/padding：值1 值2 值3　　  //設值元素上、左右、下的內外邊距

當我寫的margin/padding寫的沒毛病的時候他沒有給我顯示出來我想要的結果是什麼狀況？

　　這種狀況出現的時候請你先檢查你的代碼是否有問題，如果代碼沒有問題的話就是出現了BUG。那麼該如何解決的？

　　當你的margin出現問題的時候只要在父元素中加入overflew：hidden 就能夠解決它的問題。可是當你的父元素出現溢出狀況的時候就回隱藏。

　　當你的padding出現問題的時候只要在元素中加入box-sizing：border-box 就能夠解決它的問題

　　固然還有其餘的方法回去除bug的問題我在這裏給寫的是最簡單的方法，不喜勿噴。謝謝