當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

028_CSS外边距

發(fā)布時間：2025/4/17 CSS 66 豆豆

生活随笔收集整理的這篇文章主要介紹了 028_CSS外边距小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會在元素外創(chuàng)建額外的"空白"。

2. CSS外邊距屬性

3. 所有外邊距都允許使用負(fù)值。

4. 上外邊距

4.1. margin-top屬性設(shè)置元素的上外邊距。

4.2. 默認(rèn)值

4.3. 可能的值

5. 右外邊距

5.1. margin-right屬性設(shè)置元素的右外邊距。

5.2. 默認(rèn)值

5.3. 可能的值

6. 下外邊距

6.1. margin-bottom屬性設(shè)置元素的下外邊距。

6.2. 默認(rèn)值

6.3. 可能的值

7. 左外邊距

7.1. margin-left屬性設(shè)置元素的左外邊距。

7.2. 默認(rèn)值

7.3. 可能的值

8. 外邊距

8.1. margin簡寫屬性在一個聲明中設(shè)置所有外邊距屬性。

8.2. 您還可以按照上、右、下、左的順序分別設(shè)置各邊的外邊距, 也可以只設(shè)置其中1~3個值, 因?yàn)橥膺吘嘧裱祻?fù)制規(guī)則。

8.3. 例子

8.3.1. 代碼

<!DOCTYPE html> <html><head><title>CSS外邊距</title><meta charset="utf-8" /><style type="text/css">* {margin: 0;padding: 0;}p {width: 600px;background-color: orange;}#p1 { margin: 10px; }#p2 { margin: 10%; }#p3 { margin: 1in 10% 10px 10em; }#p4 { margin: 10px auto 10px auto; }#p5 { margin-top: 10px; margin-right: 10pt; margin-bottom: 10%; margin-left: 1em; }</style></head><body>margin-top屬性設(shè)置元素的上外邊距。 <hr/>margin-right屬性設(shè)置元素的右外邊距。 <hr/>margin-bottom屬性設(shè)置元素的下外邊距。<hr/>margin-left屬性設(shè)置元素的左外邊距。<hr/>margin簡寫屬性在一個聲明中設(shè)置所有外邊距屬性。您還可以按照上、右、下、左的順序分別設(shè)置各邊的外邊距, 也可以只設(shè)置其中1~3個值, 因?yàn)橥膺吘嘧裱祻?fù)制規(guī)則。<hr/></body> </html>

8.3.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的028_CSS外边距的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

外边
_CSS