Bootstrap4的内边距和外边距
1、打开WebStorm开发工具，新建test.html文件，并将bootstrap的样式文件放在同级目录
2、在test.html文件引入bootstrap样式，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
</body>
</html>
3、修改代码，添加两个div，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 150px">
<div class="bg-dark text-white font-weight-light ">hello</div>
</div>
</body>
</html>
4、浏览器查看效果如下，打开开发者模式，注意观察内层的div宽度占满外层宽度，高度是里面的文本的高度而变化，并不会占满外层div高度，这就是div这个元素的特性
5、设置内边距，用p-数字形式表示，如果仅仅设置上边距pt-数字，同理左pl，右pr，下pb，上下y，左右x，数字范围是0-5，以rem为单位，rem实际就是px一定比例的换算，具体效果可以实际尝试，现修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 150px" class="bg-danger">
<div class="bg-dark text-white font-weight-light p-1">hello</div>
</div>
</body>
</html>
6、浏览器查看效果如下图，内边距实际也增加了内层div的高度
7、设置外边距，格式和内边距一样，就是将p换成了m，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 150px" class="bg-danger">
<div class="bg-dark text-white font-weight-light p-1 m-3">hello</div>
</div>
</body>
</html>
8、浏览器查看效果如下图，内层div实际就是一个盒子
9、为了更好的理解，我们将外层div也设置外边距和内边距，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 150px" class="bg-danger p-2 m-4">
<div class="bg-dark text-white font-weight-light p-1 m-3">hello</div>
</div>
</body>
</html>
10、浏览器查看效果如下图，注意观察上部的外边距，并不是m-4和m-3的距离之和而是m-4的距离，这是外边距叠加效应取较大的那个的特性
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：177
阅读量：77
阅读量：55
阅读量：78
阅读量：70