CSS_盒模型

版權聲明：本文為部落客原創文章，轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/54744550

600*600的div方形，加上屬性margin-top:100px後，div的内容沒有改變，但是在div外面多出了100px的空間。

當加上屬性padding:px時，在div四條邊外圍多出了100px的空間，此時顯示出來的div的大小變為800px

大方塊的規格為600*600，兩個小方塊的規格為300*300，并排排列剛好在一行。給兩個方塊之間加上外邊距後，右邊的方塊被擠到下方，而方塊的大小沒有改變。如圖：

與此類似，在兩個方塊之間加上内邊距後，兩個方塊的大小改變，右邊的額方塊被擠到下方，如果想讓顯示出來的方塊保持原來的樣子，需要将div的尺寸減小為300px-10px

加上黑子邊框後，原div的大小沒有變，隻是在外面加上了邊框，由于邊框的影響，右邊的方塊被擠到下方。