今天帶大家快速理解盒子模型，直接上代碼：

css盒子我的css盒子測試模型

上面代碼沒有任何難度，只是寫了一個div標簽，大家已經知道，div標簽是塊級元素，所以會占滿一行：

但是我們也注意到了圖片的左側其實還是有一些間隙的：

這個間隙在我們預期中是不應該存在的，這種間隙基本上就是出在margin或者padding或者border上。

我們先看開發者工具的右側：

上面有一個element.style{}，下面有一個div標簽的屬性，默認display: block。上面那個是干什么用的呢？我們修改一下代碼：

我的css盒子測試模型

然后再刷新頁面看：

這下我們就知道了，這個element.style就是我們寫在代碼里的屬性。但是我們一般不會這么寫，也就是大家在寫代碼的時候把所有屬性都放到css文件中為好，不要讓這個element.style有任何內容。

下面還有一個方框：

這個框就是目前這個css盒子的具體屬性，比如寬度等信息。

• margin：外邊距
• border：邊框
• padding：內邊距

也就是說一個完整的盒子模型大小是由這三個參數值共同決定的。現在我們修改代碼：

lesson4.html

我的css盒子測試模型

原代碼不變，只是給div加一個id。

index.css

*{}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff;}

然后我們刷新頁面：

下面盒子區域也會隨之變化：

我們看到內容區域大小變成了100*100，而padding、border、margin都為0，我們來修改這三個值，再看效果：

*{}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px;}

盒子大小由原來的100*100變為120*120了。

padding為內邊距，我們看到文字和邊緣有了10像素的距離：

從上面圖片看到，padding屬性也是分為上下左右的，所以這個padding其實是分為padding-left、padding-right、padding-top、padding-bottom。

如果四個方向邊距都不一樣，我們寫四個有點太累贅了，所以我們可以這樣寫：

padding: 10px 20px 30px 40px;

可以看到，四個值從左到右分別代表：上、右、下、左，也就是順時針走的邊距。只要這樣寫的方式，都是這種順時針代表的。

如果你寫

padding: 10px 20px;

就代表上下10px，左右20px。

這些大家試一下就知道了。

border代表邊框。

#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border: 10px solid red;}

border: 10px solid red;代表上下左右都是10像素、實線、紅色。如果要四個邊框不一樣就只能一個一個寫了：

#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}

增加了border以后盒子大小也會變化：

由于現在瀏覽器有可能會自動給你的代碼加上margin或者padding，我們經常在css文件中先設置一下這兩個屬性值為0：

html, body{ margin: 0px; padding: 0px;}

此時，我們再看一下，樣式：

lesson4.html

Css盒子模型我的css盒子測試模型

index.css

*{}html, body{ margin: 0px; padding: 0px;}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}

此時，樣式就會緊貼著瀏覽器邊緣了：

有時候我們也會這樣寫：

index.css

*{ margin: 0px; padding: 0px;}html,body{ width: 100%; height: 100%;}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}

這樣一來，我們盒子模型的大小就會隨著瀏覽器窗口的大小而自適應了。再來說一下外邊距——margin，我們修改我們的代碼為：

lesson4.html

Css盒子模型我的css盒子測試模型1 我的css盒子測試模型2

index.css

*{ margin: 0px; padding: 0px;}html,body{ width: 100%; height: 100%;}div.mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}

我們看一下效果：

兩個盒子分別在兩行出現，那么如果我想把這兩個盒子放到一行，我要怎么辦呢？我的第一個想法是把display屬性改為inline，但是發現改后樣式變為：

這是因為行內元素是不能修改寬和高的，這時候我們用display: inline-block就可以了：

現在又出現了另一個問題，就是大家發現上面兩個盒子中間多了一個空白的地方，而且空白地方無法選中，說實話如果你用inline-block那么中間這個間距就是默認自帶的了(如果非要去掉就要加float: left或者margin: -10;)。

現在我們盒子和瀏覽器邊緣是沒有間距的，現在我們希望它離瀏覽器有一段距離，我們加一個margin: 10px;屬性，然后再看：

我們看到它和瀏覽器之間有了邊距，我們再來看一下現在盒子的大小：

盒子現在的大小是160*140

可以看到盒子的大小是沒有計算最外層的margin屬性的也就是

160=100+202+102；140=100+102+102

所以說margin是盒子的外邊距，在盒子外面，不算做盒子大小的。

現在大家就掌握了盒子模型的所有基礎概念了。

如果對接口、性能、自動化測試、面試經驗交流等感興趣的，可以關注我的頭條號，我會不定期的發放免費的資料，這些資料都是從各個技術網站搜集、整理出來的，如果你有好的學習資料可以私聊發我，我會注明出處之后分享給大家。歡迎分享，歡迎評論，歡迎轉發。需要資料的同學可以關注小編+轉發文章+私信【測試資料】

總結

以上是生活随笔為你收集整理的两个相邻盒子的边框怎么只显示一个_一篇文章带你快速理解盒子模型「经典案例」...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。