課程
/前端開發(fā)
/HTML/CSS
/CSS深入理解之margin
我清楚重疊的原理,可能是之前沒寫過類似的案例吧,老師講的這個實際應(yīng)用栗子沒聽懂,希望搞明白的同學(xué)指點一次。
2016-07-10
源自:CSS深入理解之margin 3-1
正在回答
不知道你現(xiàn)在理解了沒,我的理解是,比如一組元素,兩兩之間都需要間隔時,我們一般都會統(tǒng)一為每個元素設(shè)置margin-bottom或者margin-top,以設(shè)置margin-top為例,那么到最后(最下面)一個元素的時候,一般需要單獨為其設(shè)置margin-bottom保持布局的完整合理,但是之后項目需求若是刪除了最后一個元素,那么又沒有給倒數(shù)第二個元素設(shè)置margin-bottom,就會出現(xiàn)當前的最后一個元素緊貼底部的情況,需要重新為其設(shè)置margin-bottom來解決,但是若采用老師所說的方式,相鄰兄弟元素之間會發(fā)生重疊不影響間距,最后和第一個元素又都有各自的margin-bottom和margin-top,刪除任意一個元素都不會影響這種穩(wěn)定的狀態(tài),這就是所謂增加了健壯性。
嗯,希望講清楚啦。
假蛙工程師
試了一下,用margin top和bottom同時用,當刪除最后一個按鈕,按鈕后面內(nèi)容的不會擠上來,能夠增強健壯性,結(jié)構(gòu)不會隨便被破壞。只有margin-top,刪除按鈕,后面的會緊貼著按鈕上面內(nèi)容,破壞頁面結(jié)構(gòu)。
通過margin-top和margin-bottom可以增強代碼的健壯性,老師例子來說,最下面本來有個button按鈕,如果只使用margin-top沒了button按鈕,上下就會發(fā)生重疊
陳小窩
舉報
本CSS教程帶你深入講解CSS的margin屬性,解決你多年困惑
1 回答請問margin重疊的意義?
5 回答第三個盒子沒有出現(xiàn)margin-top重疊問題,請問是修復(fù)了嗎?
1 回答margin負值使兩端對齊不太明白?
1 回答干掉margin-top重疊第四種方案中的 占用了很大的高度,有解嗎?
1 回答margin與css重疊是不是可以理解為后面設(shè)置的屬性會覆蓋前面的,所以兩個盒子共用一個屬性啊?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-12-02
不知道你現(xiàn)在理解了沒,我的理解是,比如一組元素,兩兩之間都需要間隔時,我們一般都會統(tǒng)一為每個元素設(shè)置margin-bottom或者margin-top,以設(shè)置margin-top為例,那么到最后(最下面)一個元素的時候,一般需要單獨為其設(shè)置margin-bottom保持布局的完整合理,但是之后項目需求若是刪除了最后一個元素,那么又沒有給倒數(shù)第二個元素設(shè)置margin-bottom,就會出現(xiàn)當前的最后一個元素緊貼底部的情況,需要重新為其設(shè)置margin-bottom來解決,但是若采用老師所說的方式,相鄰兄弟元素之間會發(fā)生重疊不影響間距,最后和第一個元素又都有各自的margin-bottom和margin-top,刪除任意一個元素都不會影響這種穩(wěn)定的狀態(tài),這就是所謂增加了健壯性。
嗯,希望講清楚啦。
2016-08-04
試了一下,用margin top和bottom同時用,當刪除最后一個按鈕,按鈕后面內(nèi)容的不會擠上來,能夠增強健壯性,結(jié)構(gòu)不會隨便被破壞。只有margin-top,刪除按鈕,后面的會緊貼著按鈕上面內(nèi)容,破壞頁面結(jié)構(gòu)。
2016-07-10
通過margin-top和margin-bottom可以增強代碼的健壯性,老師例子來說,最下面本來有個button按鈕,如果只使用margin-top沒了button按鈕,上下就會發(fā)生重疊