CSS盒子模型與邊距

CSS中的盒子模型指的是我們常用的幾種HTML標簽，在屏幕上呈現出的方框，包含內容區、內邊距區、邊框區和外邊距區。

.box{
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid black;
margin: 10px;
}

以上代碼創建了一個寬高均為200px的方框，內邊距和邊框都是10像素，外邊距也是10像素。其中，padding屬性表示內邊距，border屬性表示邊框，margin屬性表示外邊距。

內邊距指的是內容區周圍的空間，邊框指的是內邊距和外邊距之間的空間，而外邊距則是盒子與其它元素之間留空的空間。

通過設置盒子模型的邊距屬性，我們可以調整盒子的位置和大小，從而實現頁面元素的排版和布局。例如，我們可以通過設置margin-left、margin-right、margin-top、margin-bottom屬性來控制元素的四周外邊距的大小，從而讓元素在頁面中的位置發生變化。

.box{
margin-top: 50px;
margin-left: 50px;
}

上述代碼就將元素的上邊距和左邊距都設置為50像素，從而使元素離頁面上方和左側的距離增加50像素，實現了在頁面中的定位。

總之，CSS盒子模型的邊距屬性是頁面布局中不可或缺的一部分，它能實現元素的定位和排版，幫助我們打造出漂亮的網頁界面。