Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

HTML+CSS 轻松入门之盒子模型之边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左

下面我们写一个实例来讲解；

首先我们先写一段没有使用边界的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
        width:200px;
        height:200px;
        border:1px solid red;
      }
  </style>
</head>
<body>
    <div id="dv1">php中文网</div>
    <div id="dv2">中华民族伟大复兴</div>
</body>
</html>

俩个div 都是在一起的，如果我想让俩个div之间的距离有30像素，应该怎么去写css代码？

#dv2{margin-top:30px;}

当我们加上这句代码，俩个div之间就有距离了

小伙伴们可以分别试试右边，下边 ，左边，看看什么样的一个效果

Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:200px; height:200px; border:1px solid red; } </style> </head> <body> <div id="dv1">php中文网</div> <div id="dv2">中华民族伟大复兴</div> </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)  492782 spielt ab