網頁當中所有元素形成的矩形框，這種框就叫盒模型
內容區content通過寬高設定內容
padding設定方向值
padding-left
padding-right
padding-top
padding-bottom
padding特點
padding位置：內容到盒子邊緣
padding值會把盒子撐大，設定了寬高：如果即想要設定padding又不想將盒子撐大就要在原來的寬高減去padding的值；不設定寬高時不用減
margin 一個值表示四周都有
屬性值與padding相同

特點

不會撐大盒子，在盒子的外面，不會對背景圖產生影響，調整兄弟元素之間的距離
margin與padding的區別
padding:加在父元素之上時擠元素

margin：加子元素之上，讓子元素產生外邊距與父元素產生距離。
margin存在的問題
給子元素新增margin-top加邊距加在了父元素身上
解決方式：父元素加border
父元素新增浮動
不用margin用padding
margin的上下重疊 兄弟元素一個margin-bottom一個margin-top顯示的屬性是數值大的 左右不重疊

盒子居中（margin：0 auto）水平居中（p div h1~h6 table。。。使用）

    margin：20px auto 0 auto
    margin：20px auto 20px

必須設定寬高
父元素寬高必須比該元素大
塊級元素（div ol ul dl dt dd form table h1~h6 ）

獨佔一行
可以設定寬高
盒模型的屬性都可以使用
可以作為其他元素的盒子、容器
p標籤不可作為塊級元素的容器
內聯元素（a span b strong i em img sub sup u label input textarea文字域）
元素在同一行顯示
不可以設定寬高 寬高由內容決定
和模型的margin/padding左右有作用，上下失效
img標籤可以設定寬高
內聯塊元素input
擁有內聯元素的特點也擁有塊級元素的特點
置換元素（可變元素）img/input（瞭解）
div
p
img src=""
input type=""
display
inline為內聯元素
block為塊級元素
inline-block為內聯塊元素
none為不可見