第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對網頁排版做了哪些顛覆設計。如果這篇文章對你有幫助，記得隨手點贊哦！