margin與padding的區別與用法—以及出現bug的解決方法

margin（外邊距）	padding（內邊距）
1、語法結構 （1）margin-left:10px; 左外邊距 （2）margin-right:10px; 右外邊距 （3）margin-top:10px; 上外邊距 （4）margin-bottom:10px; 下外邊距 （5）margin:10px; 四邊統一外邊距 （6）margin:10px 20px; 上下、左右外邊距 （7）margin:10px 20px 30px; 上、左右、下外邊距 （8）margin:10px 20px 30px 40px; 上、右、下、左外邊距	1、語法結構 （1）padding-left:10px; 左內邊距 （2）padding-right:10px; 右內邊距 （3）padding-top:10px; 上內邊距 （4）padding-bottom:10px; 下內邊距 （5）padding：10px; 四邊統一內邊距 （6）padding:10px 20px; 上下、左右內邊距 （7）padding:10px 20px 30px; 上、左右、下內邊距 （8）padding:10px 20px 30px 40px; 上、右、下、左內邊距
2、咱們能夠用一張圖來更加直觀的瞭解他們的區別
3、那麼他們會出現哪些bug呢？      margin      在咱們給div元素設置margin的時候，經常會出現這樣的問題，好比有一個大塊裏面有一個小塊，咱們給小塊設置向下移50px，會發現小塊和大塊都會向下移50px；那麼咱們如今就須要給大塊的div添加樣式overflow：hidden；（溢出的部分隱藏）。      padding    在咱們給div元素設置padding的時候，經常會出現這樣的問題，好比有一個大塊裏面有一個小塊，咱們給大塊設置padding：50px；會發現它高增長50px；那麼咱們如今就須要給大塊的div添加樣式box-sizing:border-box；（盒模型）。