整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
果你設(shè)置了兩個(gè)相鄰的 div 的 margin 為 8px ，但實(shí)際顯示的間距只有 8px 而不是預(yù)期的 16px ，這可能是因?yàn)?CSS 中的外邊距重疊（margin collapsing）導(dǎo)致的。
外邊距重疊是指當(dāng)兩個(gè)垂直相鄰的塊級(jí)元素具有相鄰的外邊距時(shí)，它們的外邊距會(huì)合并為一個(gè)外邊距，取其中的最大值作為最終的外邊距值。這可能會(huì)導(dǎo)致你看到的實(shí)際間距小于預(yù)期值。
為了避免外邊距重疊，你可以嘗試以下方法：
給其中一個(gè) div 添加內(nèi)邊距（padding）： 可以給其中一個(gè) div 添加內(nèi)邊距，而不是使用外邊距來實(shí)現(xiàn)間距的效果。這樣就不會(huì)發(fā)生外邊距重疊。
使用空的塊級(jí)元素來間隔： 可以在兩個(gè) div 之間添加一個(gè)空的塊級(jí)元素（例如 <div></div> ），并給這個(gè)元素設(shè)置期望的外邊距。這樣可以避免外邊距重疊問題。
使用 flex 布局或者絕對(duì)定位： 可以考慮使用 flex 布局或者絕對(duì)定位來控制元素之間的間距，這樣可以避免外邊距重疊問題。
下面是一個(gè)使用空的塊級(jí)元素來間隔的示例代碼：
<div class="container">
<div class="box"></div>
<div class="spacer"></div>
<div class="box"></div>
</div>
.container {
display: flex;
}
.box {
width: 50px;
height: 50px;
background-color: lightblue;
margin: 8px;
}
.spacer {
flex: 1;
}
通過以上方法，你應(yīng)該可以避免外邊距重疊，實(shí)現(xiàn)兩個(gè) div 之間的間距為 16px 的效果。
東IT優(yōu)就業(yè)
什么是margin、padding?margin和padding的區(qū)別和用法又是什么?廣州IT培訓(xùn)老師告訴你。
marigin：就是外邊距。padding：就是內(nèi)邊距。panda是熊貓大家都是知道吧，熊貓是我們中國(guó)的國(guó)寶而且都很可愛，所以看見padding就知道了是內(nèi)邊距是吧。
一、margin和padding的用法
二、其他的方法
margin和padding都是簡(jiǎn)寫屬性，他們可以直接在里面設(shè)置他們的屬性。即：margin/padding：值 。但是這個(gè)樣子寫的話都把所有的值都設(shè)置了還能讓其他的值都單個(gè)的寫嗎?方法是有的：
當(dāng)你寫的margin/padding寫的沒毛病的時(shí)候，他沒有給顯示出來我想要的結(jié)果是什么情況?
這種情況出現(xiàn)的時(shí)候請(qǐng)你先檢查你的代碼是否有問題，若是代碼沒有問題的話就是出現(xiàn)了BUG。那么該如何解決的?
當(dāng)你的margin出現(xiàn)問題的時(shí)候只要在父元素中加入overflew：hidden 就可以解決它的問題。但是當(dāng)你的父元素出現(xiàn)溢出情況的時(shí)候就回隱藏。
當(dāng)你的padding出現(xiàn)問題的時(shí)候只要在元素中加入box-sizing：border-box 就可以解決它的問題。
希望廣州IT培訓(xùn)老師分享的內(nèi)容對(duì)大家有所幫助。
廣東IT優(yōu)就業(yè)
出處：www.cnblogs.com/CcPz/p/8185489.html
更多IT精彩推薦：
帶你打開世界第一編程語(yǔ)言的大門：http://www.ujiuye.com/zt/java/?wt.mc_id=17009338
例
設(shè)置一個(gè)p元素的右邊距：
p
{
margin-right:2cm;
}
屬性定義及使用說明
margin-right屬性設(shè)置元素的右邊距。
注意： 負(fù)值是允許的。
| 默認(rèn)值： | 0 |
|---|---|
| 繼承： | no |
| 版本： | CSS1 |
| JavaScript 語(yǔ)法： | object.style.marginRight="10px" |
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
| 屬性 | |||||
|---|---|---|---|---|---|
| margin-right | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
屬性值
| 值 | 描述 |
|---|---|
| auto | 瀏覽器設(shè)置的右外邊距。 |
| length | 定義固定的右外邊距。默認(rèn)值是 0。 |
| % | 定義基于父對(duì)象總高度的百分比右外邊距。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承右外邊距。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
