玛珍，玛珍，margin！
生活随笔
收集整理的這篇文章主要介紹了
玛珍，玛珍，margin！
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近在整理鞏固面試相關的資料，又看到了熟悉的老朋友：margin，當時覺得其讀起來很親切，現在又發現很多遺忘的知識點。
了解margin
margin，譯為“外邊緣”，在CSS作為屬性定義元素周圍的空間，從以下盒模型中能更好的理解margin。
| 屬性 | 描述 |
|---|---|
| margin | 簡寫屬性。在一個聲明中設置所有外邊距屬性。 |
| margin-bottom | 設置元素的下外邊距。 |
| margin-left | 設置元素的左外邊距。 |
| margin-right | 設置元素的右外邊距。 |
| margin-top | 設置元素的上外邊距。 |
margin屬性可以有一到四個值。
- margin:25px 50px 75px 100px;
- 上邊距為25px
- 右邊距為50px
- 下邊距為75px
- 左邊距為100px
- margin:25px 50px 75px;
- 上邊距為25px
- 左右邊距為50px
- 下邊距為75px
- margin:25px 50px;
- 上下邊距為25px
- 左右邊距為50px
- margin:25px;
- 所有的4個邊距都是25px
margin負值
- margin-top、left負值：元素向上、向左移動
- margin-right負值：右側元素左移，自身不收影響；當右邊無元素，其實就是縮小自身寬度。
- margin-bottom負值：下方元素上移，自身不受影響
margin塌陷
margin塌陷（又稱margin重疊）指文檔流內，塊級元素與塊級元素垂直方向上的 margin 合并（塌陷）為單個 margin，且只發生在垂直方向。行內元素不存在margin 塌陷，因為行內元素不占有外邊距，同樣道理float元素也不存在margin合并。
總結為：
- 相鄰元素的margin-top和margin-bottom會發生重疊
- 空白內容的標簽也會重疊
解決方案：
1.BFC塊級格式化上下文，創建隔離的容器
<body>
<style>
.aa {
display: flex;
flex-direction: column;
width: 300px;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
margin-top: 10px;
}
</style>
<div class="aa">
<div class="bb" style="margin-bottom: 10px;"></div>
<div class="bb" style="margin-top: 10px;"></div>
</div>
</body>
2.子元素浮動定位，父元素清除浮動
<body>
<style>
.aa {
border: 1px solid red;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.clearfix:after {
content:'';
display: table;
clear:both;
}
</style>
<div class="aa clearfix">
<div class="bb" style="margin-bottom: 10px;"></div>
<div class="bb" style="margin-top: 10px;float:left;"></div>
</div>
</body>
3.修改代碼，添加空div，設置為flex布局
<body>
<style>
.aa {
border: 1px solid red;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
}
</style>
<div class="aa">
<div class="bb" style="margin-bottom: 10px;"></div>
<div style="display: flex;"></div>
<div class="bb" style="margin-top: 10px;"></div>
</div>
</body>
更多參考：https://blog.csdn.net/Celester_best/article/details/127455732
總結
以上是生活随笔為你收集整理的玛珍，玛珍，margin！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Go 语言中 defer 使用时有哪些陷
- 下一篇： 大模型应用(1) 搭建本地知识库