html设置右边界,CSS边界(margin)——CSS实验室
我們首先來搭建實(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html5 微格式,HTML5抢鲜:微格
- 下一篇: 兹介绍我校计算机科学与技术,清华大学计算