CSS內外邊距的區別
阿新 • • 發佈：2021-05-20
外邊距(Margin)：圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的“空白”。
內邊距(Padding)：元素的內邊距在邊框和內容區之間。
在初學CSS的時候內外邊距的解釋比較抽象
下面是詳細解釋：
建立一個頁面給body設定一個灰色背景，為了方便演示我加了float左浮動
建立一個div元素設定屬性並且新增內容
內邊距簡單解釋就是元素與該元素的內容的距離
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" 
這就是你的內容和當前所在元素的距離
這時我們給這個元素的內邊距進行設定再看看效果（左邊與頂部內邊距與內容距離20px）
<div style=" padding:20px 0 0 20px; background-color:white; height:40px;width:200px;">這是一個div元素</div>
內邊距的改變會影響到元素的大小(內邊距高寬+元素高寬)
接下來是外邊距
外邊距簡單解釋就是父元素與子元素或者兩個同級元素之間的距離，
我們再建立一個div元素:
<div style="background-color:lawngreen; height:40px; 
給這個元素新增外邊距：margin:20px 0 0 20px;效果如下：
再給第一個元素也新增外邊距：
可以試試給第二個元素左邊加大外邊距，兩個子元素的距離也會發生改變
div元素與body主體出現了距離，這就是設定外邊距的效果，需要注意的是，如果子元素內外邊距超過了父元素可能會使的佈局紊亂，所以內外邊距最好不要超過父元素。