第8节 Bootstrap网页布局之网格之间间隙详解
8.1 margin 和padding
8.1.1 margin 和padding的定义
margin（外边距）：是指从自身边框到另一个容器（包括父容器与同级容器）边框之间的距离，是容器外距离。
padding（内边距）：是指自身边框到自身内部子容器边框之间的距离，是容器内距离。
8.1.2 margin 和padding的相同点
（1）参数形式相同。如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上、下，第二个用于左、右。如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
（2）内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
（3）容器与父容器的距离等于自身margin 和在父容器padding的和。
8.1.3 margin 和padding的不同点
（1）padding不能给负值，margin可以给负值。
（2）如果只有两个容器嵌套。在子容器上设置margin 和在父容器上设置padding效果类似。
8.1.4 margin 和padding演示及解析
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
.div1{background-color: rgb(62, 62, 68);width: 1200px;height: 500px;padding:50px;}
.div2{background-color: rgb(182, 191, 212);width:1200px;height:500px;}
.div3{background-color: cornflowerblue;width: 300px;height:300px;float:left;margin:50px;padding:50px 0px;}
.div4{background-color: rgb(114, 201, 121);width:200px;height:200px;margin:50px;}
</style>
<title>margin 和padding</title>
</head>
<body>
<div>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</div>
</body>
</html>显示效果
示例解释：
（1）黑色边距50px是div1设置的padding产生的
（2）灰色部分上下左右边距50px是由div3产生的margin:50px。
蓝色方框中间的两个灰色距离100px是由左右两边的蓝色方框div3产生的margin:50px之和。
（3）蓝色方框内部左右距50px是由div4产生的padding:50px，上下是由div3产生的padding:50px 0px和div4产生的margin:50px之和。
（4）div3宽度、高度都为300px，它等于div4边长200px，再加上上下左右margin:50各50px。 你可能会有疑问，div3蓝色方框看起来高度不像是300px啊，其实蓝色区域不仅包含了div3区域，还包含了上下的padding 50px。
（5）div2的宽度=(300+50X2)X3=1200px
div2的高度=300+50X2+50X2=500px（前面50x2是div3的margin:50px;后面的50x2是div3的padding:50px 0px）
（6）div2没有margin 和padding，所以，div1和div2宽高度相等，不要把div1的算在里面哦。
（7）容器的宽度和高度是指不包含margin 和padding的宽度和高度，但是父容器要想容纳下子容器，其宽度高度必须包含子容器的宽度和高度加上子容器的margin和padding的宽度和高度（宽度包含左右、高度包含上下）。
相信通过我的一番讲解，大家对margin 和padding应该有了透彻的理解吧。如果看不懂就多看看，自己再多练习以下，自己写更加详细的例子练习。
8.2 Bootstrap 间隙
8.2.1 Bootstrap 间隙工作原理
Bootstrap间隙是由水平填充创建的列内容之间的间隙。由水平方向的 padding实现。 我们在每一列上设置右边填充和左边填充padding-right and padding-left，并在每一行的开始和结束处使用margin 来偏移该边距以对齐内容。
间隙的宽度为1.5rem（24px），这允许我们将网格与填充和边距分隔符比例相匹配。
间隙可以进行相应的调整。 使用断点特定的间隙类修改水平间隙、垂直间隙和所有间隙。
对这段话不理解也没关系，直接看下面的例子就好了。
8.2.2 Bootstrap水平间隙
.gx-*类可用于控制水平间隙宽度。如果使用较大的间隙，则可能需要调整.container或.container流体父级，以防止溢出。例如，在下面的示例中，我们使用.px-4增加了填充：
<div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light"></div> </div> <div class="col"> <div class="p-3 border bg-light"></div> </div> </div> </div>
另一种解决方案是在.row父容器添加.一个包含overflow隐藏类的包装器：
<div class="container overflow-hidden"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
他们的效果都是一样的
8.2.3 Bootstrap垂直间隙
.gy-*类可用于控制垂直间隙宽度。与水平间隙一样，垂直间隙也会导致页面末尾的行下面出现一些溢出。如果出现这种情况，请在.row父容器添加一个包含.overflow隐藏类的包装器。
<div class="container overflow-hidden"> <div class="row gy-5"> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
其效果如下：
8.2.4 Bootstrap水平和垂直间隙
.g-*类可用于控制水平间隙宽度，对于以下示例，我们使用较小的间隙宽度，因此不需要添加.overflow隐藏包装类。前面的x、y其实就是水平和垂直坐标系的意思。
<div class="container"> <div class="row g-2"> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
8.2.5 Bootstrap行列间隙
也可以将间隙类添加到行列中。在下面的示例中，我们使用响应行列和响应间隙类。
<div class="container"> <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3"> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> </div> </div>
8.2.6 Bootstrap无间隙
可以使用 .g-0删除预定义网格类中列之间的间隙。这将删除.row的margin和所有直接子列的水平填充。
需要边到边的设计吗？ 放弃 .container or .container-fluid. 实际上，它看起来是这样的。注意：您可以继续将其用于所有其他预定义的网格类（包括列宽、响应层、重排序等）。
<div class="row g-0"> <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>
效果图
今天的课程就到这里，到此，关于网格终于也要告一个段落了。请关注我，及时学习 俺老刘原创的《Bootstrap5零基础到精通》第九节 Bootstrap对网页排版做了哪些颠覆设计。如果这篇文章对你有帮助，记得随手点赞哦！