css上邊距怎麼設定
- 青灯夜游原創
- 2021-07-15 16:50:2112506瀏覽
css設定上邊距的方法：1、使用margin-top屬性設定元素的上外邊距；2、使用padding-top屬性設定元素的上內邊距。 margin-top和padding-top屬性接受任何長度單位，可以是像素、英吋、毫米或em。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css設定上邊距的方法一：使用margin-top屬性
#margin-top屬性可以設定元素的上外邊距
圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的「空白」。
外邊距屬性受任何長度單位（可以是像素、英吋、毫米或 em。）、百分數值甚至負值。
屬性值：
| 值 | |
|---|---|
| #auto | 瀏覽器設定的上外邊距。 |
| length | 定義固定的上外邊距。預設值是 0。 |
| % | 定義基於父物件總寬度的百分比上外邊距。 |
| inherit | 規定應該從父元素繼承上外邊距。 |
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.ex1 {margin-top:2cm;}
</style>
</head>
<body>
<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p>一个没有指定边距大小的段落。</p>
</body>
</html>效果圖：
css設置上邊距的方法二：使用padding-top屬性
padding-top屬性可以設定元素的上內邊距
元素的內邊距在邊框和內容區之間，是元素邊框與元素內容之間的空白區域
內邊距屬性接受長度值或百分比值，但不允許使用負值。
屬性值：
| 值 | |
|---|---|
| # length | 規定以具體單位計的固定的上內邊距值，例如像素、公分等。預設值是 0px。 |
| % | 定義基於父元素寬度的百分比上內邊距。此值不會如預期的那樣運作於所有的瀏覽器中。 |
| inherit | 規定應該從父元素繼承上內邊距。 |
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:20%;}
</style>
</head>
<body>
<p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p>
<p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p>
<p class="padding2">这个文本的上部填充边距为20%。这个文本的上部填充边距为20%。这个文本的上部填充边距为20%。</p>
</body>
</html>效果圖：
（學習影片分享： css影片教學）
以上是css上邊距怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css樣式由什麼組成下一篇：css樣式由什麼組成