margin：外邊距。

　　　　body有默認的margin:8px

　　　　margin: 20px;

　　　　margin-top: 40px;

　　　　margin-left: 50px;

　　　　margin-bottom: 100px;

?

padding：內邊距，邊框與內容之間的距離. padding的區域是有背景顏色，并且背影顏色和內容區域顏色一樣。

　　　　也就是說，background-color這個屬性將填充所有的border以內的區域。

　　　　padding有四個方向。所以說我們能分別描述4個方向的padding

　　　　方法有兩種：

　　　　　　1. 寫小屬性? ?

　　　　　　padding-top, padding-right,padding-bottom,padding-left

　　　　　　2. 寫綜合屬性，用空格隔開

　　　　　　padding: 20px 30px 40px 50px? #上 右 下 左

　　　　　　padding: 20px 30px 40px #? 上(20px)? 左右(30px)? 下(40px)

　　　　　　padding: 20px 30px? ?# 上下(20px)? ?左右(30px)

　　　　　　padding: 20px? ? #上下左右(20px)

　　　　一些標簽默認是有padding的.? ul>li? 8px

　　　　* 效率不高，所以應該使用并集選擇器。已經有人寫好清除默認的padding 【reset.css】,導入reset.css即可。

　　　　*{

　　　　　　padding:0;　　

　　　　　　margin:0

　　　　}

　　　　

border：指的是盒子的邊框，有三個要素：粗細，線性，顏色

　　border: 1px solid red;

　　 如果顏色不寫，黑夜是黑色

　　 如果粗細不寫 不顯示。只寫線性樣式，默認的有上下左右 3px的寬度 solid默認的黑色

　　1. 按照3要素

　　border-width: 5px? 或：border-width: 5px 10px

　　border-style:solid;　　或：solid dotted double dashed

　　border-color:red;　　或： red green yellow

?

　　2. 按照方向

　　border-top-width: 10px;

　　border-top-color: red;

　　border-top-style: solid;

　　border-right-width: 20px

　　border-bottom-width:

　　border-left-width:

?　　3. 設置border沒有樣式

　　border: none;

　　border-left: none;

　　border-left: 0;　　

?

?　　例子： 使用border制作小三角形

　　div{

　　　　width:0;

　　　　height:0;

　　　　border-bottom: 20px solid red;

　　　　border-left: 20px solid transparent;

　　　　border-right: 20px solid transparent;

　　}

　　

width: 指的是內容的寬度，而不是整個盒子真實的寬度

height：指的是內容的高度，而不是整個盒子真實的高度

?

盒子的寬度=內容的寬度+(邊框+padding+[margin])*2

?

轉載于:https://www.cnblogs.com/beallaliu/p/9286588.html

總結

以上是生活随笔為你收集整理的6.1.2.6 盒子的全部內容，希望文章能夠幫你解決所遇到的問題。

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