我們首先來搭建實驗margin的平臺，一個p元素。點擊下面的按鈕以將這個p元素“圈出來”。

在p的外面還套著一個div，再點擊下面的按鈕將它圈出來。

CSS頂部邊界：margin-top

通過設置CSS中的margin-top屬性，我們可以設置元素的頂部邊界。點擊下面的按鈕給元素設置一個5像素的頂部邊界，看看實驗的p元素會有什么變化。

margin-top:5px;

設置完頂部邊界之后，我們發現p的頂部與div的距離反而變小了，這是因為默認情況下，p的上下是有margin的。

CSS底部邊界、左側邊界、右側邊界

與頂部邊界的道理是一樣的，我們同樣可以通過CSS的margin-bottom、margin-left、margin-right屬性分別設置底部、左側、右側邊界。可以點擊下面的三個按鈕實驗一下。

margin-bottom:5px;

margin-left:5px;

margin-right:5px;

CSS邊界：margin

與前面的縮略屬性類似，我們可以一次指定所有方向的邊界。只需要設置一個margin屬性即可。點擊下面的按鈕給我們的實驗p設置10像素的邊界。

在設置margin屬性的時候，我們會發現段落的邊框與div的邊框之間有了我們所指定的距離，這就是margin屬性的作用。

總結

以上是生活随笔為你收集整理的html设置右边界,CSS边界(margin)——CSS实验室的全部內容，希望文章能夠幫你解決所遇到的問題。

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