我們首先來搭建實(shí)驗(yàn)margin的平臺(tái)，一個(gè)p元素。點(diǎn)擊下面的按鈕以將這個(gè)p元素“圈出來”。

在p的外面還套著一個(gè)div，再點(diǎn)擊下面的按鈕將它圈出來。

CSS頂部邊界：margin-top

通過設(shè)置CSS中的margin-top屬性，我們可以設(shè)置元素的頂部邊界。點(diǎn)擊下面的按鈕給元素設(shè)置一個(gè)5像素的頂部邊界，看看實(shí)驗(yàn)的p元素會(huì)有什么變化。

margin-top:5px;

設(shè)置完頂部邊界之后，我們發(fā)現(xiàn)p的頂部與div的距離反而變小了，這是因?yàn)槟J(rèn)情況下，p的上下是有margin的。

CSS底部邊界、左側(cè)邊界、右側(cè)邊界

與頂部邊界的道理是一樣的，我們同樣可以通過CSS的margin-bottom、margin-left、margin-right屬性分別設(shè)置底部、左側(cè)、右側(cè)邊界。可以點(diǎn)擊下面的三個(gè)按鈕實(shí)驗(yàn)一下。

margin-bottom:5px;

margin-left:5px;

margin-right:5px;

CSS邊界：margin

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

在設(shè)置margin屬性的時(shí)候，我們會(huì)發(fā)現(xiàn)段落的邊框與div的邊框之間有了我們所指定的距離，這就是margin屬性的作用。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。