外邊距（margin）
- 外邊距不會影響盒子可見框的大小
- 但是外邊距會影響盒子的位置
- 一共有四個方向的外邊距：
margin-top
- 上外邊距，設定乙個正值，元素會向下移動
margin-right
- 預設情況下設定margin-right不會產生任何效果
margin-bottom
- 下外邊距，設定乙個正值，其下邊的元素會向下移動
margin-left
- 左外邊距，設定乙個正值，元素會向右移動
- margin也可以設定負值，如果是負值則元素會向相反的方向移動
- 元素在頁面中是按照自左向右的順序排列的，
所以預設情況下如果我們設定的左和上外邊距則會移動元素自身
而設定下和右外邊距會移動其他元素
- margin的簡寫屬性
margin 可以同時設定四個方向的外邊距 ，用法和padding一樣
- margin會影響到盒子實際占用空間
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
盒模型-外邊距<
/title>
.box1
.box2
<
/style>
<
/head>
="box1"
>
<
/div>
="box2"
>
<
/div>
<
/body>
<
/html>
詳解css盒模型與外邊距重疊
之前寫了一篇關於如何解決css的外邊距重疊問題,可是後來發現,我有些本末倒置了,對於乙個問題的正確的處理流程就應該是先發現問題,分析問題,解決問題,所以我在這篇文章中就對下css的盒模型,什麼是外邊距重疊,為什麼會發生外邊距重疊,以及怎樣計算外邊距重疊一一進行解讀,旨在透過現象看本質,達到掌握的目的...
詳解css盒模型與外邊距重疊
之前寫了一篇關於如何解決css的外邊距重疊問題,可是後來發現,我有些本末倒置了,對於乙個問題的正確的處理流程就應該是先發現問題,分析問題,解決問題,所以我在這篇文章中就對下css的盒模型,什麼是外邊距重疊,為什麼會發生外邊距重疊,以及怎樣計算外邊距重疊一一進行解讀,旨在透過現象看本質,達到掌握的目的...
css盒模型。邊框和內外邊距
css盒模型 外邊距 邊框 內填充 內容 盒模型分為兩種 標準盒模型 怪異盒模型 ie盒模型 邊框 border border 10px solid blue 表示設定10畫素藍色實線條的邊框 是以下三個樣式的復合語法 border width 10px 設定邊框的寬度 border color b...