Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

CSS Margin(外边距)

CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间。

Margin

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

margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。单位可以使用像素px，百分比，厘米等

CSS边距属性

在CSS中，它可以指定不同的侧面不同的边距

属性描述
margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

实例

设置不同侧面的边距

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(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>

运行程序尝试一下

Margin - 简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的缩写属性。

所有边距属性的缩写属性是"margin":

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.margin
        {
            margin:100px 50px;
        }
    </style>
</head>

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

</html>

运行程序尝试一下

margin属性可以有一到四个值

margin:25px 50px 75px 100px;

上边距为25px

右边距为50px

下边距为75px

左边距为100px

margin:25px 50px 75px;

上边距为25px

左右边距为50px

下边距为75px

margin:25px 50px;

上下边距为25px

左右边距为50px

margin:25px;

所有的4个边距都是25px

更多实例

使用厘米值和百分比值设置边距

         <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
    <style>
        p{background-color: #8de943
        }
        p.ex1 {margin-top:2cm;}
        p.bottommargin {margin-bottom:25%;}
    </style>
</head>

<body>

<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>

<p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p>

</body>
</html>

运行程序尝试一下



Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网（php.cn）</title> <style> p{background-color: #8de943 } p.ex1 {margin-top:2cm;} p.bottommargin {margin-bottom:25%;} </style> </head> <body> <p>一个没有指定边距大小的段落。</p> <p class="ex1">一个2厘米上边距的段落。</p> <p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492837 spielt ab