1. 程式人生 > >margin、border和padding之間的區別

margin、border和padding之間的區別

問題描述:

         margin叫邊界手冊上叫外補丁,padding是填充內補丁,在他們之間有一個邊界border。padding包圍的就是content,那麼這個盒子搜尋是不是就是最外層的div,按照從外到內,margin,border,padding,content?這個margin是不是和border的距離?二,比如說最外層height:800px;width:800px;margin:1px 1px 1px 1px;其他忽略,content是不是距離最外層的div都是1px?那麼content就是798px;798px;如果margin為1,border為1,那麼content距離margin是不是就2px,因為中間多了一個border為1。content的大小為796,796。三,如果margin為1,padding為1沒有寫border,content的大小為798,798。四:margin和padding是不是都有填充的意思。為什麼我總感覺padding和margin通用,都是把content範圍縮小。

解惑:

margin和border影響都是對外的,就是說,在裡面的表不會因為這兩個值改變而改變。padding影響是對內的,會影響在其定義的表內部的表。
            一、margin是和border的距離;
            二、content距離最外層的div都是1px。如果margin為1,border為1,那麼content距離margin還是1PX,因為border是會在原來大小上向外加上的。(這點你可以自己建兩個div對比檢視。像這樣:<div style="width:203px; height:50px; border:50px solid red"></div>
<div style="width:203px; height:50px; border:1px solid red"></div>)
            三、margin是對外的,padding是對內的,margin不影響內表,你的content大小是799,799。
            四:margin和padding都有填充的意思。padding會讓content範圍縮小,而margin不會。

例子:

給你一個例子,複製到body裡:(你可以把border放大來對比檢視效果)
-------------------
<div style="width:400px; height:400px; background-color:#CCFF66;border:blue 1px solid; position:inherit">
<div style="margin:10px; padding:10px; width:300px; height:300px; border:red 1px solid; background-color:#CCCCCC; position:inherit">顯示內容與紅色線之間的距離就是padding定義的,紅線與藍線之間的距離就是margin定義的(以左上角為準)</div>
</div>