简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

css中什么属性可为元素设置外边距

王林
Lepaskan： 2023-02-16 18:49:53
asal
5346 orang telah melayarinya

css中margin属性可以为元素设置外边距。margin属性可以定义元素周围的空间，它会清除周围的外边框元素区域。margin属性可以单独改变元素的上下左右边距，也可以一次改变所有的属性。

css中什么属性可为元素设置外边距

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中，可以使用margin属性来为元素添加外边距，margin属性可以定义元素周围的空间。

注意：

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

d0e2b19c7a77ac6209e68a1197a7bc9.png

属性值：

  • auto    设置浏览器边距。

  • length    定义一个固定的margin（使用像素，pt，em等）

  • %    定义一个使用百分比的边距

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
p
{
    background-color:yellow;
}
p.margin
{
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>
Salin selepas log masuk

运行结果：

b5bcf7d0221f8a1e6ac7bb87d14fdfd.png

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci css中什么属性可为元素设置外边距. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css 元素 属性 外边距
sumber：php.cn
Artikel sebelumnya：css中用什么属性来定义盒的类型 Artikel seterusnya：怎样在css里更改字体大小
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1335
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！