一、 在預設佈局的垂直方向上，預設情況下外邊距是是不會疊加的，會出現合併現象，誰的外邊距較大，就聽誰的；但是在水平方向就不會出現這種狀況，我們舉個例子

       span{

            display: inline-block;

            width:100px;

            height:100px;

            border:1px solid red;

        }

        div{

            width:100px;

            height:100px;

            border:1px solid green;

        }

        /*我們讓span的兩個盒子，相距100px*/

        .hezi1{

            margin-right:50px

        }

        .hezi2{

            margin-left: 50px;

        }

        .box1{

            margin-bottom:50px;

        }

        .box2{

            margin-top:50px;

        }

..........省略程式碼..........

<span class="hezi1">我是span</span>

<span class="hezi2">我是span</span>

<div class="box1">我是span</div>

<div class="box2">我是span</div>

二、盒子模型

1.什麼是盒子模型

答：CSS盒子模型僅僅一個比較形象地比喻，HTML中所有的標籤都是盒子，我們現實生活中的物品大多都是有位置區域劃分的​。

​注意：在HTML中所有的標籤都是可以設定​：寬度高度、內邊距、邊框、外邊距

2.​舉例：

<style>

        span,a,b,strong{

            display: inline-block;

            width:150px;

            height:150px;

            padding:20px;

            border:2px dotted red;

            margin:10px;

        }

</style>

........省略程式碼..........

<span>我是span</span>

<a href="#">我是一個超連結</a>

<b>我是加粗</b>

<strong>我是強調</strong>

 

釋義：通過谷歌開發者工具，我們可以檢視，每個標籤所屬的區域，它們之間的數字，都是嚴格按照定義來的，F12下的有指導模型。

2.盒子模型的寬度和高度

（1）內容的寬度和高度：width\height設定的寬度和高度

（2）元素的寬度和高度​：邊框加內邊距加內容的寬度和高度

（3）元素空間的寬度和高度：外邊距加邊框加內邊距加內容的寬度和高度

三、原始碼：

d109_margin_merge.html

d110_box_model.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d109_margin_merge.html

https://github.com/ruigege66/HTML_learning/blob/master/d110_box_model.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）

3.部落格園：https://www.cnblogs.com/ruigege0000/

4.歡迎關注微信公眾號：傅立葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大資料學習視訊禮包

&n