第8節(jié) Bootstrap網(wǎng)頁布局之網(wǎng)格之間間隙詳解
8.1 margin 和padding
8.1.1 margin 和padding的定義
margin（外邊距）：是指從自身邊框到另一個容器（包括父容器與同級容器）邊框之間的距離，是容器外距離。
padding（內(nèi)邊距）：是指自身邊框到自身內(nèi)部子容器邊框之間的距離，是容器內(nèi)距離。
8.1.2 margin 和padding的相同點(diǎn)
（1）參數(shù)形式相同。如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。如果只提供一個，將用于全部的四邊。如果提供兩個，第一個用于上、下，第二個用于左、右。如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
（2）內(nèi)聯(lián)對象要使用該屬性，必須先設(shè)定對象的height或width屬性，或者設(shè)定position屬性為absolute。
（3）容器與父容器的距離等于自身margin 和在父容器padding的和。
8.1.3 margin 和padding的不同點(diǎn)
（1）padding不能給負(fù)值，margin可以給負(fù)值。
（2）如果只有兩個容器嵌套。在子容器上設(shè)置margin 和在父容器上設(shè)置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設(shè)置的padding產(chǎn)生的
（2）灰色部分上下左右邊距50px是由div3產(chǎn)生的margin:50px。
藍(lán)色方框中間的兩個灰色距離100px是由左右兩邊的藍(lán)色方框div3產(chǎn)生的margin:50px之和。
（3）藍(lán)色方框內(nèi)部左右距50px是由div4產(chǎn)生的padding:50px，上下是由div3產(chǎn)生的padding:50px 0px和div4產(chǎn)生的margin:50px之和。
（4）div3寬度、高度都為300px，它等于div4邊長200px，再加上上下左右margin:50各50px。 你可能會有疑問，div3藍(lán)色方框看起來高度不像是300px啊，其實(shí)藍(lán)色區(qū)域不僅包含了div3區(qū)域，還包含了上下的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應(yīng)該有了透徹的理解吧。如果看不懂就多看看，自己再多練習(xí)以下，自己寫更加詳細(xì)的例子練習(xí)。
8.2 Bootstrap 間隙
8.2.1 Bootstrap 間隙工作原理
Bootstrap間隙是由水平填充創(chuàng)建的列內(nèi)容之間的間隙。由水平方向的 padding實(shí)現(xiàn)。 我們在每一列上設(shè)置右邊填充和左邊填充padding-right and padding-left，并在每一行的開始和結(jié)束處使用margin 來偏移該邊距以對齊內(nèi)容。
間隙的寬度為1.5rem（24px），這允許我們將網(wǎng)格與填充和邊距分隔符比例相匹配。
間隙可以進(jìn)行相應(yīng)的調(diào)整。 使用斷點(diǎn)特定的間隙類修改水平間隙、垂直間隙和所有間隙。
對這段話不理解也沒關(guān)系，直接看下面的例子就好了。
8.2.2 Bootstrap水平間隙
.gx-*類可用于控制水平間隙寬度。如果使用較大的間隙，則可能需要調(diào)整.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-*類可用于控制垂直間隙寬度。與水平間隙一樣，垂直間隙也會導(dǎo)致頁面末尾的行下面出現(xiàn)一些溢出。如果出現(xiàn)這種情況，請?jiān)?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其實(shí)就是水平和垂直坐標(biāo)系的意思。
<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行列間隙
也可以將間隙類添加到行列中。在下面的示例中，我們使用響應(yīng)行列和響應(yīng)間隙類。
<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刪除預(yù)定義網(wǎng)格類中列之間的間隙。這將刪除.row的margin和所有直接子列的水平填充。
需要邊到邊的設(shè)計(jì)嗎？ 放棄 .container or .container-fluid. 實(shí)際上，它看起來是這樣的。注意：您可以繼續(xù)將其用于所有其他預(yù)定義的網(wǎng)格類（包括列寬、響應(yīng)層、重排序等）。
<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>
效果圖
今天的課程就到這里，到此，關(guān)于網(wǎng)格終于也要告一個段落了。請關(guān)注我，及時學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第九節(jié) Bootstrap對網(wǎng)頁排版做了哪些顛覆設(shè)計(jì)。如果這篇文章對你有幫助，記得隨手點(diǎn)贊哦！